Question

我有一个包含几个组件的父组件：

<app-comp1 *ngIf="current == '1'"></app-comp1>
<app-comp2 *ngIf="current == '2'></app-comp2>
<app-comp3 *ngIf="current == '3'></app-comp3>
<app-comp_N *ngIf="current == 'N'></app-comp_N>

是否可以像这样在父组件中定义这些组件：

public childComponents: [AppComp1, AppComp2, AppComp3, ...N];

然后在模板中迭代它们：

<ng-container *ngFor="let component of childComponents">
   {{ component }}
</ng-container>

Answer 1

您可以尝试使用动态组件：

https://www.npmjs.com/package/ng-dynamic-component

   <ng-container *ngFor="let component of childComponents">
    <ndc-dynamic
      [ndcDynamicComponent]="component"
    ></ndc-dynamic>
   </ng-container>

此外，您应该查看文档以提供输入和输出数据，因为动态组件不能轻松绑定到值。

具有输入和输出参数的动态组件：

@Component({
  selector: 'my-component',
  template: `
    <ndc-dynamic
      [ndcDynamicComponent]="component"
      [ndcDynamicInputs]="inputs"
      [ndcDynamicOutputs]="outputs"
    ></ndc-dynamic>
  `,
})
class MyComponent {
  component = MyDynamicComponent1;
  inputs = {
    hello: 'world',
    something: () => 'can be really complex',
  };
  outputs = {
    onSomething: type => alert(type),
  };
}

@Component({
  selector: 'my-dynamic-component1',
  template: 'Dynamic Component 1',
})
class MyDynamicComponent1 {
  @Input()
  hello: string;
  @Input()
  something: Function;
  @Output()
  onSomething = new EventEmitter<string>();
}

您必须构建一个具有与组件相关的回调、值、绑定等的对象，并将其与动态组件一起传递。

但您不应忘记，如果您不够小心，此类动态组件有时很难调试并导致一些可维护性问题。

如何在循环中迭代组件？

1 个答案: