Миграция хоста и ComponentResolver из AngularDart с 4 по 5 - PullRequest
Новая
       26

Миграция хоста и ComponentResolver из AngularDart с 4 по 5

2 голосов
/ 31 мая 2019

Я занят переносом большого приложения Angular4 (которое было только что перенесено из Angular2) в Angular5.

В нескольких местах приложения мы используем директиву для тега div или другого html-элементакоторый затем генерируется внутри этого компонента, в этом случае директива contentItem используется, чтобы указать, что div должен быть сгенерирован в центре макета, тогда как footerItem указывает, что div должен быть сгенерирован внизу страницы.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>

Внутри 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внедрение в StandardLayout или есть способ Angular5 сделать это? 

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

    int id = IdProvider.generateIntIndex();

    TemplateRef template;
}

TLDR, как мне перенести ComponentResolver и свойство host в аннотациях @Component.

1 Ответ

2 голосов
/ 04 июня 2019

атрибуты хоста в Компоненте изменяются на аннотации @HostBindings или @HostListener. В этом случае: 

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

Для резольвера необходимо импортировать саму фабрику. Импортируйте файл template.dart для компонента ContentItem. Поэтому, если этот файл - content_item.dart, вы должны импортировать content_item.template.dart.

Тогда просто используйте тип ContentItemNgFactory вместо того, чтобы выполнять поиск с использованием типа.

...