有没有办法绑定到 angular 中的组件数组并使用 ngFor 在当前组件中呈现这些组件

Question

前言，这与以下问题有关：

是否可以从视图模型中的数组渲染动态组件？（类似于将 ng-template 用于上述问题中的单个组件）。

<div *ngFor="let component of components">
    <Do something here to render component>
</div>

我之前使用过 KnockoutJs，在视图中使用类似以下的内容很容易完成此操作：

<!-- ko foreach: someArrayOfComponents -->
    <!-- ko component: { componentName: 'some-component', params: someComponentViewModel } --><!-- /ko -->
<!-- /ko -->

Answer 1

在 ng-template 中，还有一个等效的实现 ngFor。已通过：

<ng-template ngFor                            // Indication of your ngFor loop
             [ngForOf]="components"           // Your list
             let-component                    // Your component from components
             let-i="index">                   // Your index
    ...
</ng-template>

附上Stackblitz Demo供大家参考

如果要在数组中渲染动态组件，最好在ngSwitchCase

中处理它们

AppComponent

// components = ['brother', 'sister', 'baby'];

<my-parent *ngFor="let component of components"     
           [component]="component">
</my-parent>

ParentComponent（处理 ngSwitch）

<div>

  <div [ngSwitch]="component">                             // Whatever value passed inside the @Input() component, it will render the component based on the conditions or cases below

    <my-brother *ngSwitchCase="'brother'"></my-brother>    // BrotherComponent

    <my-sister *ngSwitchCase="'sister'"></my-sister>       // SisterComponent

    <my-baby *ngSwitchCase="'baby'"></my-baby>             // BabyComponent
    
  </div>

</div>

因此，如果 components 数组值为 ['brother', 'sister', 'baby'];，它将呈现上面的 3 个组件
如果它只是 ['brother', 'baby']; 它只会呈现 BrotherComponent 和 BabyComponent

另附Stackblitz Demo供大家参考

有没有办法绑定到 angular 中的组件数组并使用 ngFor 在当前组件中呈现这些组件

Is there a way to bind to an array of components in angular and render those in the current component using ngFor

angular-components

angular