我正忙于将一个大型 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>
标准布局内部,
<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 类注入(inject)移动到 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
属性。
最佳答案
组件上的主机属性更改为 @HostBindings 或 @HostListener 注释。在这种情况下:
@HostBinding('class.content-item')
static const bool contentItemClass = true;
对于解析器,您需要导入工厂本身。导入 ContentItem 组件的 template.dart 文件。因此,如果该文件是 content_item.dart,您将导入 content_item.template.dart。
然后只需使用 ContentItemNgFactory 类型,而不是使用类型进行查找。
关于angular - 将主机和 ComponentResolver 从 AngularDart 4 迁移到 5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56390519/