使用组件作为元素 - Angular 8

Question

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

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

我想使用类似的东西：

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

新手angular不知道怎么弄

Answer 1

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

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

Answer 2

.ts

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

.html

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

Answer 3

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

中投影模板

书目组件模板

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

parent

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

Answer 4

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

的值

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

Use a component as element - Angular 8