所以我试图在我的组件中的特定位置显示子组件。
我有以下内容:
@Component({
selector: 'app-item-list',
template: `
<p *ngFor="let item of items">
{{item.order}}
<!-- display content of child component here -->
</p>`
})
export class ItemListComponent implements OnInit, AfterContentInit {
//Get all child components of the type ItemComponent and store them.
@ContentChildren(ItemComponent, {descendants: true})
items?: QueryList<ItemComponent>;
constructor() { }
ngOnInit() {
}
ngAfterContentInit(): void {
}
}
@Component({
selector: 'app-item',
template: `
<p>
item works!
</p>
<ng-content></ng-content>
`
})
export class ItemComponent implements OnInit {
@Input() order?: string;
constructor() { }
ngOnInit() {
}
}
我尝试使用 <ng-content select="item">
显示它但这没有用。具有以下内容:
<app-item-list>
<app-item order="2">
test2
</app-item>
<app-item order="1">
test1
</app-item>
</app-item-list>
预期的输出是2
item works!
test2
1
item works!
test1
https://stackblitz.com/edit/angular-ivy-2aibgt
最佳答案
我可以向您推荐一个在 Angular Material 库中使用的解决方案。
app-item
的内容<ng-template>
中的组件标签 item.component.html
<ng-template> <----------------------------- wrapper
<p>
item works!
</p>
<ng-content></ng-content>
</ng-template>
TemplateRef
的引用item.component.ts
@ViewChild(TemplateRef, {static: true}) template: TemplateRef<any>;
app-item-list
的循环中使用它组件 项目列表.component.html
<p *ngFor="let item of items">
{{item.order}}
<ng-template [ngTemplateOutlet]="item.template"></ng-template>
</p>
Forked Stackblitz
关于javascript - 显示我使用 @ContentChildren 或 @ViewChild 获取的组件的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62939824/