Angular 9 IVY Ленивые привязки загруженных компонентов не работают

Такие директивы, как ngIf, ngClass, ngStyle, не работают в компонентах с отложенной загрузкой (появившихся в Angular 9).

core.js:12626 Can't bind to 'xxx' since it isn't a known property of 'xxx'.

Единственная привязка, которую мне удалось заставить работать, выглядит примерно так: [style.color]="color". Ленивая загрузка пакета js webpack работает нормально, если нет привязки или есть просто привязка как [style.color]="color".

Ленивый загруженный компонент не объявлен в NgModule и загружается как таковой.

 async lazy1() {
    this.viewContainerRef.clear();
    const { LazyComponent } = await import("./lazy.component");
    this.viewContainerRef.createComponent(
      this.cfr.resolveComponentFactory(LazyComponent)
    );
  }

Полный пример (по какой-то причине не может быть запущен в stackblitz): https://stackblitz.com/edit/angular-zyp3wm

Это можно воспроизвести шаг за шагом, следуя приведенной ниже статье https://johnpapa.net/angular-9-lazy-loading-components/ Вам просто нужно добавить ngIf где-нибудь в один из ленивых компонентов, чтобы получить проблему, с которой я столкнулся.


angular angular-ivy
person Royalsmed    schedule 13.04.2020    source источник
comment
Это ожидаемое поведение в соответствии с командой angular. Компонент следует обернуть в модуль и вместо этого загрузить модуль. Дополнительная информация: github.com/angular/angular/issues/36604.   -  person Royalsmed    schedule 13.04.2020

Ответы (1)


arrow_upward
0
arrow_downward

Отрисовка компонента, который не объявлен ни в одном NgModule, или, точнее, использование других элементов, которые не объявлены или не импортированы в тот же NgModule, невозможна.

Я написал сообщение в блоге о будущем автономных компонентов в мире Angular Ivy несколько месяцев назад — вы можете найти его здесь. Это может помочь вам понять необязательную перспективу NgModule и какова стоимость (ручной компакт-диск, другой инжектор и т. д.)

person Eliran Eliassy    schedule 14.04.2020