在 ngFor 中渲染组件

Question

我正在循环一个对象数组，并在对象内部指定一个要加载的组件。例如，循环中的一项是

{
  label: 'Patient\'s Weight',
  subtitle: '',
  component: WeightComponent,
},

在循环中，我想渲染WeightComponent，但它只是将function WeightComponent() 渲染为文本。

我知道我这样做不正确，但我不确定正确的方法是什么。我也试过了

{
  label: 'Patient\'s Weight',
  subtitle: '',
  component: '<app-weight></app-weight>',
},

但这也只是呈现为文本。我需要使用渲染服务类型的东西吗？我看到了使用 [innerHTML] How to translate HTML string to real HTML element by ng-for in Angular 2? 的建议，但他们说这条路线容易受到攻击。

目前这样做不太理想

<div *ngFor="let step of selectedDosing.steps; index as i" class="step" [attr.step]="i">
  <ion-label class="step-title">
    <span class="number">{{ i + 1 }}</span>
    <span class="labels">
      <div class="main-label">{{ step.label }}</div>
      <div class="subtitle">{{ step.subtitle }}</div>
    </span>
  </ion-label>
  <app-hepatic-impairment *ngIf="step.component == 'hepatic-impairment'"></app-hepatic-impairment>
  <app-recommended *ngIf="step.component == 'recommended'"></app-recommended>
  <app-weight *ngIf="step.component == 'weight'"></app-weight>
</div>

Answer 1

有一个内置的NgComponentOutlet 指令可以帮助您完成任务。

您需要做的就是将这些组件添加到您的NgModule 或Component 的entryComponents 数组中，然后按如下方式简单地使用它：

ts

steps: [
  {
    label: 'label',
    component: WeightComponent,
  },
  {
    label: 'label',
    component: RecommendedComponent,
  },
  {
    label: 'label',
    component: WeightComponent,
  },
]

html

<ng-template [ngComponentOutlet]="step.component"></ng-template>

Ng-run Example