我可以遍历Angular中不同子组件的html吗？

Question

我希望通过不同子组件的 html 进行父视图循环。我正在使用 Angular8。我该怎么做？

我已经尝试过使用 ViewChildren 的各种尝试，例如建议的 here 和 here。

但 ViewChildren 的这些和其他示例似乎与我的想法不同。也可能是我对 ViewChildren 缺乏了解。

这里有一些伪代码来表达我的想法（我知道它不起作用，但希望它在这里阐明了目标）：

*happy-parent-component:

  html:
   <div *ngFor="let childComponent of childComponents" >
        <{{childComponent}} ></{{childComponent}}> <!--I understand this doesn't work--> 
    </div>

  ts:
    import { ChildComponent1} from '../child-component1/child-component1.component"
    import { ChildComponent2} from '../child-component2/child-component2.component"
    ...
    export class HappyParentComponent implements OnInit {
       @ViewChild(ChildComponent1, {static: false})
       @ViewChild(ChildComponent2, {static: false})

       public childComponents = [ChildComponent1, ChildComponent2]  //(I understand this doesn't work...)

*子组件1：

     html:
        <div><!--fancy html from childcomponent1 --></div>

*子组件2：

     html:
        <div><!--fancy html from childcomponent2 --></div>

HappyParentComponent 视图上的结果是：

  <!--fancy html from childcomponent1 -->
  <!--fancy html from childcomponent2 -->  

有没有办法做到这一点？

编辑： 只是为了了解更多信息，我想动态添加子组件的 html，而不是直接将 childComponen1、childComponent2 等放入父视图 html 的原因是将显示哪些组件取决于用户选择。

所以用户会做出某些选择，这会改变显示的子组件。随着时间的推移，最终可能会有很多子组件。

Answer 1

您的子组件是否有类似的东西要显示？

我问的原因是，如果你有类似的数据要显示，你可以创建一个子组件并传递不同的数据在循环内显示。

喜欢

<child-component *ngFor="let childObj of childArr" [data]="childObj">
    // your html here
</child-component>

正如你所说的动态变化的视图，将来会有很多子组件，你不应该创建多个组件，而是你可以遵循这个。

Answer 2

您可能正在寻找dynamically creating components。你说组件应该根据用户的选择来呈现，所以这可能是一种方式：

将所有可用组件收集到一个对象中：

components = {
  hello: HelloComponent,
  hello1: Hello1Component
};

不知道如何收集组件，但在我的示例中，我有一个表单，表单结果可能如下所示：

{
  hello: false,
  hello1: true
}

允许这样做：

// val would be the above form object
createSelected(val) {
  // this removes all previously created components, if exist
  this.removeComponents();
  const selected = {};
  for (let v in val) {
    if (val[v]) {
      let comp = this.components[v];
      let factory = this.componentFactoryResolver.resolveComponentFactory(
        comp
      );
      // this is the array that gets cleared 
      // when all previous components should be destroyed
      this.componentRefs.push(this.container.createComponent(factory));
    }
  }
}

removeComponents() {
  if (this.componentRefs.length) {
    this.componentRefs.map(x => x.destroy());
    this.componentRefs = [];
  }
}

上面的createSelected()是表单提交时调用的。

您的父模板将如下所示：

<div #container></div>

我们通过以下方式在父级中访问它：

@ViewChild("container", { read: ViewContainerRef, static: false })
container: ViewContainerRef;

然后记得在你的 ngModule 中将这些子组件添加为 entryComponents。

STACKBLITZ