Question

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

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

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

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

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

如果您好奇为什么我需要这样做，那是因为我包括一个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

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

1 个答案: