Angular 9 IVY 延迟加载的组件绑定不起作用答案

【问题标题】：Angular 9 IVY Lazy loaded component bindings not workingAngular 9 IVY 延迟加载的组件绑定不起作用
【发布时间】：2020-04-13 07:40:51
【问题描述】：

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"。只要没有绑定或者只是像[style.color]="color" 这样的简单绑定，延迟加载 webpack js 包就可以正常工作。

延迟加载的组件没有在 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 团队的预期行为。应该将组件包装在模块中并加载模块。更多信息：github.com/angular/angular/issues/36604

标签： angular angular-ivy

【解决方案1】：

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

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

【讨论】：