如何使用Angular数据绑定来渲染组件？

Question

在我的dashboard.component.html我具有以下代码：

<div [innerHTML]="myComponent"></div>

在dashboard.component.ts内部，我有以下代码：

myComponent = "<app-messages></app-messages>"

我希望它在此处呈现消息组件。 但是它只是空白。 如果我将html中的代码切换为<div><app-messages></app-messages></div>那么它可以按预期工作，但我不想直接包含它。

如果您好奇为什么我需ngFor ，那是因为我包括一个ngFor并且只想按顺序呈现dashboard.component.ts中某个存储桶数组中的组件。

谢谢。

Answer 1

我认为最好的方法还没有在这里使用ngFor。 您还可以使用动态组件加载，但是在这种情况下，这可能会显得过大。

@Component({
    selector: 'items',
    template: `
      <item *ngFor="let i of service.items;" [name]="i"></item>
    `,
})
export class ItemsComponent {
    constructor(public service: ItemsService) { }
}

@Component({
    selector: 'item',
    template: `<div>{{name}}</div>`,
})
export class ItemComponent {
    @Input() name: string;
}

工作示例： https : //stackblitz.com/edit/angular-audxwo