Как визуализировать компонент внутри другого динамически загружаемого компонента в Angular?

Question

Я пытаюсь создать собственный компонент Grid, в котором я хочу отображать / передавать другие компоненты. Я создал компонент Grid и динамически загружаю его в свой dashboard.component.ts.

Вот мой шаблон Grid.

<div nz-row *ngFor="let row of grid; index as i;">
    <div nz-col *ngFor="let col of row; index as j;">
      <div>
        <ng-template name="{{i}}{{j}}"></ng-template>
      </div>
    </div>
</div>

Директива.

@Directive({
  selector: 'ng-template[name]'
})
export class CustomGridDirective {
  @Input() name: string;

  constructor(public viewContainerRef: ViewContainerRef) { }
}

Мой custom-grid.component.ts,

export class CustomGridComponent implements OnInit {

  @Input() grid: any;
  @ViewChildren(CustomGridDirective) gridContainer: QueryList<CustomGridDirective>;
  
  constructor() {}
  
  ngOnInit() {
  }
}

Dashboard.component.ts, где я динамически загружаю свой компонент Grid.

async customGrid(){
  const {CustomGridComponent} = await import('../custom-grid/custom-grid.component');
  const customGridFactory = this.cfr.resolveComponentFactory(CustomGridComponent);
  let {instance} = this.anchor1.createComponent(customGridFactory, null, this.injector);
  instance.grid = [
    ['1', '2', '3']
  ]
  return instance
}

ngAfterViewInit() {
  this.customGrid().then( component => console.log(component.gridContainer));
}

Теперь я не могу получить доступ к component.gridContainer или даже component.grid. Оба возвращают undefined.

Скажем, у меня есть dashboard-widget-1.component, как мне динамически визуализировать его внутри компонента настраиваемой сетки? Я пытался приблизиться к списку запросов ViewChildren и попытаться отобразить компонент внутри.

Но я получаю component.gridContainer и component.grid, оба как undefined. Как я могу динамически отображать компоненты, такие как dashboard-widget-1.component и dashboard-widget-2.component в моем сетевом компоненте (который я динамически загружал)?

Я застрял с нескольких дней, любая помощь будет принята с благодарностью.

Answer 1

Это undefined, потому что для этого компонента еще не был выполнен цикл обнаружения изменений.

componentRef.changeDetectorRef.detectChanges();

const widgetFactory = this.cfr.resolveComponentFactory(CustomWidgetComponent);
instance.galleryContainer.forEach(target => {
  target.viewContainerRef.createComponent(widgetFactory, null, this.injector)
});

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

custom-grid.components.ts

@Component({
  ...
})
export class CustomGridComponent implements OnInit {
  ...
}
... 
@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [CustomGridComponent, CustomGridDirective],
})
export class CustomGridModule { }

Forked Stackblitz