Angular 9 IVY 延迟加载的组件绑定(bind)不起作用

Question

ngIf 等指令, ngClass , ngStyle不适用于延迟加载的组件(在 Angular 9 中引入)。
core.js:12626 Can't bind to 'xxx' since it isn't a known property of 'xxx'.
我设法让它工作的唯一绑定(bind)是:[style.color]="color" .
延迟加载 webpack js 包可以正常工作，只要没有绑定(bind)或只有简单的绑定(bind)，如 [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在某个懒惰的组件中的某个地方可以解决我遇到的问题。

Answer 1

渲染一个未在任何 NgModule 中声明的组件，或者确切地说，使用未在同一 NgModule 中声明或导入的其他元素是不可能的。

几个月前，我写了一篇关于 Angular Ivy 世界中独立组件的 future 的博文——你可以找到它 here .
它可能会帮助您了解可选的 NgModule 视 Angular ，以及成本是多少(手动 CD、不同的注入(inject)器等...)