将角分量作为数组传递给html模板。

Question

Context：-小角度应用程序(在单个屏幕上只有两个选项卡)作为静态资产独立部署在S3存储桶中。

给定的 :-我的一个角(12)容器组件有长标记，但是大部分代码由于创建网格而重复，我在一行中有几个列，如下所示

<div class="col">
        <div class="row">
          <div class="col">{{aStringTitle}}</div>
        </div>
        <div class="row">
          <div class="col mt-2">
            {{differentMarkupForEachColumn}}
          </div>
        </div>
      </div>

我想要实现的 :-我希望使用以下类型的*ngFor传递数组来呈现这些列：

    [
      {name: 'First Ng Component', component: <SmallAngularComponent>},
      {name: 'Second Ng Component', component: <AnotherSmallAngularComponent>},
      ...... and so on upto 7-8 smaller angular components    
    ]

当我检查angular.io时，我在模板文档中找不到合适的示例。

实际问题 :-如何将角分量数组传递给包含角分量的模板？

我不想要的东西， :-替代方法用这个答案解释，但是我想要呈现适当的角度分量，而不是一些随机的html。

Answer 1

因此，如果我正确地理解了您，您希望在HTML中动态地创建这些组件。

要做到这一点，只需使用NgComponentOutlet (有关更多信息，请参见这里 )。

您的代码如下所示：

component.ts

components = [
  { name: 'First Ng Component', component: SmallAngularComponent },
  { name: 'Second Ng Component', component: AnotherSmallAngularComponent },
  // ...... and so on upto 7-8 smaller angular components    
];

您可能已经注意到，组件不需要<>。

component.html

<ng-container *ngFor="let entry of components">
  <div class="col">
    <div class="row">
      <div class="col">{{ entry.name }}</div>
    </div>
    <div class="row">
      <div class="col mt-2">
        <ng-container *ngComponentOutlet="entry.component"></ng-container>
      </div>
    </div>
  </div>
</ng-container>

如果您需要将params传递给不同的组件，您可以查看这里，或者需要以编程方式创建这些组件。