Передача данных динамически создаваемым angular модулям и компонентам

Question

Мне нужно передать данные в динамически создаваемый модуль angular, такой как id, или JSON, код моего контроллера такой.

Logi c Объяснено - API обеспечивает макет страницы, если первичный модуль идет первым или вторичный модуль (есть и другие, которые не могут быть обработаны с помощью ngif), все модули имеют разный дизайн первичного и вторичные не имеют стилей, которые тоже определяются API. Идентификатор является ключом, чтобы решить все дизайны этой страницы

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 или JSON непосредственно через маршрутизатор, другой синтаксический подсластитель, который мне может не хватать, службы или сам компилятор, который я застрял здесь в течение некоторого времени, любая помощь будет признательна, или есть какой-либо другой способ сделать это в angular версии 8 без IVY Заранее спасибо.

Answer 1

Чтобы передать данные динамически создаваемым компонентам с помощью ngComponentOutlet, вы можете использовать Injector.

Просто добавьте эту функцию к вашим MainLayoutComponent:

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

и замените конструктор на объект Injector:

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

Затем - как вы можете видеть в документах - внутри ngComponentOutlet вы можете передать данные, указав такой инжектор, как этот :

<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 et c.), Должен содержать аргумент id в своем конструкторе, который вы можете далее используйте по мере необходимости:

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

Я не тестировал этот код, поэтому вам, возможно, потребуется исправить некоторые проблемы, но, надеюсь, вы поняли идею.