[英]Displaying content of Component that i fetched with @ContentChildren or @ViewChild
So I'm trying to display child components at specific locations in my Component.所以我试图在我的组件中的特定位置显示子组件。
I have the following:我有以下内容:
@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() {
}
}
I tried to display it using <ng-content select="item">
but that didn't work.我尝试使用
<ng-content select="item">
显示它,但这没有用。
With the following:具有以下内容:
<app-item-list>
<app-item order="2">
test2
</app-item>
<app-item order="1">
test1
</app-item>
</app-item-list>
the expected output is预期的 output 是
2
item works!
test2
1
item works!
test1
https://stackblitz.com/edit/angular-ivy-2aibgt https://stackblitz.com/edit/angular-ivy-2aibgt
I can suggest you a solution that is used in Angular material library.我可以建议您在 Angular 材料库中使用的解决方案。
app-item
component in <ng-template>
tagapp-item
组件的内容包装在<ng-template>
标记中item.component.html item.component.html
<ng-template> <----------------------------- wrapper
<p>
item works!
</p>
<ng-content></ng-content>
</ng-template>
TemplateRef
TemplateRef
的引用item.component.ts item.component.ts
@ViewChild(TemplateRef, {static: true}) template: TemplateRef<any>;
app-item-list
componentapp-item-list
组件的循环中使用它item-list.component.html item-list.component.html
<p *ngFor="let item of items">
{{item.order}}
<ng-template [ngTemplateOutlet]="item.template"></ng-template>
</p>
There is really no way to achieve this using ng-content
(as far as I know).真的没有办法使用
ng-content
来实现这一点(据我所知)。 ng-content
is for static content projection only. ng-content
仅适用于 static 内容投影。
Have a look at the use case here - https://github.com/angular/angular/issues/8563 - paragraph 2 confirms the fact that you have to use a query with viewref to do what you want to do ie the solution that @yurzui provided.看看这里的用例 - https://github.com/angular/angular/issues/8563 - 第2段证实了你必须使用带有viewref的查询来做你想做的事情,即解决方案@yurzui 提供。
You can always use the selector to statically select which part of the content you want to project, but I suspect this is not what you're looking for:您始终可以使用选择器静态 select 您要投影的内容的哪一部分,但我怀疑这不是您要查找的内容:
<ng-content select="[order=2]">
</ng-content>
<ng-content select="[order=1]">
</ng-content>
You may missed add select
item reference variable in item-list.component.html
您可能错过了在
item-list.component.html
中添加select
项目引用变量
item.component.html item.component.html
<p>item works</p>
<ng-content select="[body]">
</ng-content>
item-list.component.html item-list.component.html
<p *ngFor="let item of items">
<app-item >
<div body>
{{item.order}}
</div>
</app-item>
test2
</p>
Ref: Stackblitz example参考: Stackblitz 示例
Take a look at this .看看这个。 Ealier I thought there was not way to achieve your output but I finally figured it out.
之前我认为没有办法实现你的 output 但我终于想通了。
What I did was eliminate the @ContentChildren
approach and instead replaced it with an items Input
passed from the app
component.我所做的是消除
@ContentChildren
方法,而是用从app
组件传递的items Input
替换它。 I iterated through the items, displaying the order and the corresponding app-item
component.我遍历了这些项目,显示了订单和相应的
app-item
组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.