使用组件作为元素 - Angular 8答案

【问题标题】：Use a component as element - Angular 8使用组件作为元素 - Angular 8
【发布时间】：2020-04-08 17:46:07
【问题描述】：

我想使用一个组件作为一个项目。
而不是使用：

<ul class='biblList'>
    <li *ngFor="let biblCit of biblCits">
        {{ biblCit }}
    </li>
</ul>

我想使用类似的东西：

<evt-bibliography-item *ngFor="let biblCit of biblCits">
    {{ biblCit }}
</evt-bibliography-item>

作为一个有角度的新手，我不知道如何弄清楚。

【问题讨论】：

【解决方案1】：

您可以使用迭代器*ngFor 来遍历组件：

<ng-content *ngFor="let biblCit of biblCits">
  <evt-bibliography-item></evt-bibliography-item>
</ng-content>

【讨论】：

【解决方案2】：

这里是working example

.ts

biblCits=['1','2','2','3','4','5']

.html

<div *ngFor="let biblCit of biblCits">
    <child-component [parentTimerCount]="biblCit">
    </child-component>
</div>

【讨论】：

【解决方案3】：

您可以在组件模板中使用<ng-content></ng-content>，这将从父模板投射模板

参考书目组件模板

<div>
<ng-content></ng-content>
</div>

父母

<app-bibliography *ngFor="let biblCit of biblCits">
        ? {{ biblCit }} 
</app-bibliography>

【讨论】：

【解决方案4】：

您可以在 evt-bibliography-item 组件的模板中使用 <ng-content></ng-content> 来访问在您自己的组件标签之间传递的所有内容，在您的情况下是 {{ biblCit }} 的值

@Component({
  selector: 'evt-bibliography-item',
    template: '<ng-content></ng-content>'
})
export class BibliographyItem {
}

【讨论】：