将 angular 个组件作为数组传递给 html 个模板

Question

Context :-小型 Angular 应用程序（单个屏幕上只有两个选项卡）作为静态资产独立部署在 AWS S3 存储桶中。

给定 :- 我的一个 Angular(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时，我在模板文档中找不到合适的示例。

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

我不想要的 :- 中解释了替代方法，但我想渲染适当的 Angular 组件而不是一些随机的html.

Answer 1

因此，如果我理解正确的话，您想在 HTML 中动态创建这些组件。

为此，您只需使用 NgComponentOutlet（有关更多信息，请参阅 here）。

您的代码如下所示：

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>

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

将 angular 个组件作为数组传递给 html 个模板

Pass angular components as array to html template

typescript

angular2-template

angular