javascript - 将数据传递给动态创建的 Angular 模块和组件

Question

我需要将数据传递给动态创建的 Angular 模块，例如 id 或 JSON 我的 Controller 代码是这样的。

逻辑解释 - 如果主要模块排在第一位或次要模块(还有更多无法由 ngif 处理)，API 提供页面布局所有模块都有不同的设计主要和次要没有样式这也由 API 决定。 id是决定该页面所有设计的关键

export class MainLayoutComponent implements OnInit {

 modules: any = [
  {
    module: PrimaryModule,
    component: PrimaryLandingPageComponent,
    id: 1
  },
  {
    module: SecondaryModule,
    component: SecondaryLandingPageComponent,
    id: 2
  },
 ];

 constructor(public compiler: Compiler) {  }

 returnCompiledModule(moduleItem) {
   return this.compiler.compileModuleSync(moduleItem);
 }

 ngOnInit() {
   console.log('hello');
 }

}

为什么我这样做是因为我的页面布局由 API 决定，每个模块都有不同类型的组件和不同的设计(该代码已被省略)这就是我在 HTML 中呈现的方式

<ng-container *ngFor="let module of modules">
  <ng-container 
    *ngComponentOutlet="module.component; 
    ngModuleFactory: returnCompiledModule(module.module);">
  </ng-container>
</ng-container>

有什么方法可以通过路由器将数据传递给模块或与其对应的组件，JSON 中的 id 值或 JSON 本身，我可能缺少的另一种语法甜味剂，服务或我一直在使用的编译器本身在这里停留了一段时间，我们将不胜感激，或者是否有任何其他方法可以在没有 IVY 的情况下使用 Angular 版本 8 提前致谢。

Answer 1

为了使用 ngComponentOutlet 将数据传递给动态创建的组件，您可以使用 Injector。

只需将此函数添加到您的MainLayoutComponent:

getInjector(moduleItem) {
  return Injector.create([
    { provide: Number, useValue: moduleItem.id }
  ], this.injector);
}

并更改其构造函数以注入(inject) Injector 对象:

constructor(public compiler: Compiler, private injector: Injector) {  }

然后 - 正如您在 docs 中看到的那样- 在 ngComponentOutlet 中，您可以像这样指定注入(inject)器来传递数据:

<ng-container *ngFor="let module of modules">
  <ng-container 
    *ngComponentOutlet="module.component; 
                        ngModuleFactory: returnCompiledModule(module.module);
                        injector: getInjector(module);">
  </ng-container>
</ng-container>

现在每个可以动态创建的 Component 类(PrimaryLandingPageComponent、SecondaryLandingPageComponent 等)都应该包含 id 构造函数中的参数，您可以根据需要进一步使用它:

constructor(id: Number) { 
  // do whatever you need with id value
}

我没有测试过这段代码，所以您可能需要解决一些问题，但希望您能理解。