更改 ViewChild 实现以支持多个通用组件

Question

我目前有一个包含组件容器的网页：

HTML:

  <ng-container #componentContainer></ng-container>

打字稿：

@ViewChild('componentContainer', { read: ViewContainerRef }) componentContainer: ViewContainerRef;

通过以下函数插入组件：

private createComponent(pageItem: PageItem, 
    factory: ComponentFactory<BaseTemplate>, isMultiPage: boolean): void {
    const compRef = factory.create(this.injector);
    if (compRef !== null) {  
        // Set some variables on the items
        compRef.instance.PageComponent = pageItem;
        compRef.instance.MultiPageItemPage = isMultiPage;

        // Important to watch for changes.
        compRef.changeDetectorRef.detectChanges(); 
       this.componentContainer.insert(compRef.hostView);
       this.CurrentDynamicComponents.push(

     TemplateComponentLoaderService
         .createDynamicComponentModelForPageItem(pageItem, 
             compRef)
       );
    }
}

我希望重构它以适用于通用组件列表。

我将 HTML 更改为：

<div *ngFor="let row of Page.Rows" >
    <div *ngFor="let col of row.Columns" class="row">
        <div [ngClass]="{ 'col-md-1': col.Width == 1,
                          'col-md-2': col.Width == 2,
                          'col-md-3': col.Width == 3,
                          'col-md-4': col.Width == 4,
                          'col-md-6': col.Width == 6,
                          'col-md-12': col.Width == 12 }" test=test>

            <ng-container *ngFor="let com of col.Components" #componentContainer>

            </ng-container>
        </div>
    </div>
  </div>

到目前为止这有效，但显然我的 componentContainer 没有唯一的 ID。我不确定如何解决这个问题。有人对如何实施这个有什么建议吗？

Answer 1

如果我对你的理解正确的话，你需要一个迭代组件的索引。所以你可以使用 index of ngFor:

<ng-container *ngFor="let com of col.Components; let i = index" #componentContainer>
    <!-- here you can use i as an index to your component -->    
</ng-container>

更新：

无法设置 <ng-container/> 的样式，因为 <ng-container/> 未插入 HTML，但是，我们可以这样设置组件的样式：

<ng-container *ngFor="let com of col.Components; let i = index" #componentContainer>
    <com [ngStyle]="{'font-size': fontSize+'px'}"></com>
</ng-container>

更改 ViewChild 实现以支持多个通用组件

changing ViewChild implementation to support multiple, generic components

viewchild

angular