Question

基本上，我有一个名为“ Pageview”的父组件，该组件显示了如何使用特定组件的几个示例。显示的当前组件应通过Pageview组件接收的路由输入属性进行更改。最终，我希望能够一次显示该组件的多个版本，并将不同的输入属性传递给它们（以显示该组件的使用方式示例）。

在Vue中，您可以执行以下操作：

<component
  :is = "currentComponent"
  v-for: "example in examplesOfCurrentComponent"
  :text: "example.text"
 > 
<div v-if="example.slotContent" v-html="example.slotContent" />
</component

我知道Angular文档中的“动态组件”上有一些内容，但它实际上仅适用于制作单个动态组件，然后将其Input属性传递给父组件.ts文件（通过ViewChild，ViewContainerRef，Component Factory）解析器等）。但是，我试图制作多个相同的子组件，每个子组件具有不同的输入属性。

Angular文档目前建议类似：

    <ng-template currentComponent
    ></ng-template>

其中currentComponent是包含ViewContainerRef的指令。然后，我将能够在父级中创建组件实例。

但是，如何将其扩展到添加一个* ngFor来创建多个组件，然后使每个组件具有其唯一的Input属性（例如Vue示例）。

Answer 1

您也可以使用for循环创建动态组件。我解决的方法之一是将不同的组件作为输入（组件可以是相同的）。

请参考下面的示例

this.components.forEach( (sideNavComponent: DrawerConfig) => {
  const factory = this.resolver.resolveComponentFactory(sideNavComponent.type);
  const componentRef = this.vc.createComponent(factory);
  const component = componentRef.instance;
  component.data = sideNavComponent.data;
});

https://github.com/sanketmaru/ng-lib-sank/blob/master/projects/ng-lib-sank/src/lib/drawer/drawer.component.ts#L29

要发送组件，您可以像这样简单地传递组件：-

public components: [DrawerConfig<DrawerItemComponent>, DrawerConfig<DrawerItemComponent>] = [
    {
      type: DrawerItemComponent,
      data: {
        name: 'First Component'
      }
    },
    {
      type: DrawerItemComponent,
      data: {
        name: 'Second Component'
      }
    }
  ];

以上代码使用泛型，因此动态组件可以使用任何数据。希望这可以帮助。

完整的代码可以在这里找到

https://github.com/sanketmaru/ng-lib-sank/blob/master/src/app/app.component.ts#L17

基于父输入属性的动态组件渲染？

1 个答案: