Question

我目前有一个包含componentcontainer的网页：

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中的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/>并未插入HTML，因此无法设置<ng-container/>的样式，但是，我们可以为您的组件设置样式：

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

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

1 个答案: