I'm busy migrating a large Angular4 application (that was just migrated from Angular2) to Angular5.
In several places in the application, we make use of a directive to tag a div or other html element which then gets generated inside that component, in this case the contentItem directive is used to indicate that the div should be generated in the center of the layout whereas the footerItem indicated that the div should be generated at the bottom of the page layout.
<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>
Inside 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>
and
@ContentChildren(ContentItemDirective)
List<ContentItemDirective> contentItems;
@ContentChildren(ContentItemFooterDirective)
List<ContentItemFooterDirective> contentItemFooters;
In my ContentItemDirective, ComponentResolver no longer compiles, is there a drop-in replacement for it or do i require major changes to make this work in 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;
}
}
Then in my component factory, host no longer compiles, i guess i can just move that css-class injection into StandardLayout or is there an Angular5 way of doing this?
@Component(
selector: "content-item",
template: "",
host: const {
"[class.content-item]": "true",
}
)
class ContentItem {
int id = IdProvider.generateIntIndex();
TemplateRef template;
}
TLDR, how do i migrate ComponentResolver and the host property inside @Component annotations.
from Migrating host and ComponentResolver from AngularDart 4 to 5
No comments:
Post a Comment