将主机和组件解析器从AngularDart 4迁移到5

我正忙于将大型Angular4应用程序（刚刚从Angular2迁移到Angular5）迁移到Angular5

在应用程序中的几个地方，我们使用一个指令来标记一个div或其他html元素，然后在该组件中生成该元素，在这种情况下，

contentItem

指令用于指示div应在布局的中心生成，而

footerItem

指示div应在页面布局的底部生成

<standard-layout
        (print)="handlePrintReport(\$event)"
        [hideScrollbars]="true">
        <div class="content-main-1" *contentItem>
            ...
        </div>
        <div class="content-main-2" *contentItem>
            ...
        </div>
        <div class="something-else" *footerItem>
            ...
        <div>
</standard-layout>

然后在我的组件工厂中，

host

不再编译，我想我可以将css类注入移动到StandardLayout中，或者有一种Angular5方式来实现这一点

@Component(
    selector: "content-item",
    template: "",
    host: const {
        "[class.content-item]": "true",
    }
)
class ContentItem {

    int id = IdProvider.generateIntIndex();

    TemplateRef template;
}

---

TLDR，如何迁移

组件解析器

和

@Component

注释中的

主机

属性

组件上的主机属性更改为@HostBindings或@HostListener注释。在这种情况下：

@HostBinding('class.content-item')
static const bool contentItemClass = true;

对于解析器，您需要导入工厂本身。导入ContentItem组件的template.dart文件。因此，如果该文件是content\u item.dart，您将导入content\u item.template.dart

---

然后只使用ContentItemNgFactory类型，而不是使用该类型进行查找。

这是正确的。ComponentResolver使用的模式会极大地影响代码大小，因为它可以有效地防止Dart使任何组件的树抖动。在幕后，它必须维护一个类型为ComponentFactory的映射。因此，在不太符合人体工程学的情况下，导入生成的文件并直接使用生成的ComponentFactory可以让编译器对应用程序中任何未使用的组件进行树震动（如果您导入的库包含许多组件，而您只使用了很少的组件，这一点非常重要）。今天继续处理此部分并使其正常工作，谢谢你的提示。在此处发布了一个基本可行的解决方案：

@Directive(selector: "[contentItem]")
class ContentItemDirective implements AfterContentInit {

    int id = IdProvider.generateIntIndex();

    final ViewContainerRef vcRef;
    final TemplateRef template;
    final ComponentResolver componentResolver;

    ContentItemDirective(this.vcRef, this.template, this.componentResolver);

    ComponentRef componentRef;

    @override
    ngAfterContentInit() async {
        final componentFactory =
        await componentResolver.resolveComponent(ContentItem);
        componentRef = vcRef.createComponent(componentFactory);
        (componentRef.instance as ContentItem)
            ..template = template;
    }
}

@Component(
    selector: "content-item",
    template: "",
    host: const {
        "[class.content-item]": "true",
    }
)
class ContentItem {

    int id = IdProvider.generateIntIndex();

    TemplateRef template;
}

@HostBinding('class.content-item')
static const bool contentItemClass = true;