将主机和 ComponentResolver 从 AngularDart 4 迁移到 5

Question

我正忙于将一个大型 Angular4 应用程序（刚刚从 Angular2 迁移）迁移到 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>

在 StandardLayout 内部，

<div 
    class="content-scroller" 
    [class.margin-auto]="contentScrollerMarginAuto"
    [class.overflow-hidden]="hideScrollbars">
    <template ngFor let-item [ngForOf]="contentItems [ngForTrackBy]="trackByFun">
        <template [ngTemplateOutlet]="item.template"></template>
    </template>
</div>

和

@ContentChildren(ContentItemDirective)
List<ContentItemDirective> contentItems;

@ContentChildren(ContentItemFooterDirective)
List<ContentItemFooterDirective> contentItemFooters;

在我的 ContentItemDirective 中，ComponentResolver 不再编译，是否有替代品，或者我是否需要进行重大更改才能在 Angular5 中运行？

@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;
    }
}

然后在我的组件工厂中，host 不再编译，我想我可以将 css-class 注入移动到 StandardLayout 中，或者是否有 Angular5 方法来执行此操作？

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

    int id = IdProvider.generateIntIndex();

    TemplateRef template;
}

TLDR，我如何迁移 ComponentResolver 和 @Component 注释中的 host 属性。

Answer 1

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

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

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

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

将主机和 ComponentResolver 从 AngularDart 4 迁移到 5

Migrating host and ComponentResolver from AngularDart 4 to 5

dart

angular-dart

angular