我将从托管组件上的组件使用开始:
<my-templated-component [content-template]="contentTemplate">
</my-templated-component>
<ng-template #contentTemplate>
<h3>Hello There</h3>
<div>Lorem ipsum..... </div>
<custom-component></custom-component>
</ng-template>
现在,我组件的.ts:
class MyTemplatedComponent implements AfterContentInit {
@Input('content-template') contentTemplate: TemplateRef<any>;
@ContentChildren(CustomComponent) customComponentQueryList: QueryList<CustomComponent>;
...
ngAfterContentInit() {
// Length is 0 at this point. My component didn't find the component I want
console.log(`There are ${this.customComponentQueryList.length} items`);
this.customComponentQueryList.changes.subscribe((s) => {
/* This is not called. This is where I would have wanted to find
my CustomComponent to perform a task that requires its presence.
*/
});
}
}
这是MyTemplatedComponent
的标记:
<ng-container *ngTemplateOutlet="contentTemplate">
</ng-container>
我了解到QueryList<CustomComponent>
仅在ngAfterContentInit()
可用。在不订阅的情况下,CustomComponentQueryList
的项为零,因此从CustomComponent
的{{1}}中找不到@Input
。但是TemplateRef
中的changes
并未触发,因此我绝对找不到我的组件。
奇怪的是,我在页面上看到了QueryList<CustomComponent>
中@Input
的所有内容,其中包括TemplateRef
中的标记。因此,CustomComponent
是否检测到我输入的模板引用并通过MyTemplatedComponent
显示它,但是*ngTemplateOutlet
找不到我的QueryList
?
现在,如果我将CustomComponent
更改为
@Input() contentTemplate: TemplateRef<any>
,然后将模板{em> 放在@ContentChild('contentTemplate') contentTemplate: TemplateRef<any>
的标签中,如下所示:
<my-templated-component>
<my-templated-component>
<ng-template #contentTemplate>
<h3>Hello There</h3>
<div>Lorem ipsum..... </div>
<custom-component></custom-component>
</ng-template>
</my-templated-component>
QueryList
确实被触发,并且从订阅中可以找到我的changes
。
也许CustomComponent
和@ContentChild
仅在以下情况下有效:并且仅当我直接将@ContentChildren
用作组件标记的直接子元素/选择器,就像我在上面所做的那样。
但是我并不总是这样<ng-template>
,有时候<my-templated-component>
甚至可能来自托管组件之外。
如果我要做的只是将<ng-template #contentTemplate>
放入并显示在模板组件中的某处,一切都很好,但是我需要研究{{的内容 1}}我会收到各种各样的目的。
如果TemplateRefs
要求我将TemplateRefs
放入组件的标签中,则等效的装饰器是什么(我认为没有装饰器,而且肯定不是@ContentChildren
),是否通过<ng-template>
传递了@ViewChildren
?有有效的解决方法吗?
最终,如果TemplateRef
@Input
不起作用,我们如何在模板化组件内部找到以TemplateRef
传递的@Input
内的某些组件?