问题描述
限时送ChatGPT账号..假设我有这个模板:
<ng-template #test></ng-template><ng-template #test2></ng-template>
我通过以下方式检索对所有 TemplateRef
的引用:
@ViewChildren(TemplateRef)私人模板;
对于所有这些,我如何检索关联变量的名称?所以第一个模板的test"和另一个模板的test2".我绝对不想使用变量,如果可以通过使用 ng-template
的属性,那就可以了.我尝试使用 TemplateRef
、ViewContainerRef
和 ElementRef
,但每次都返回对 comment
元素的引用.>
我设法使用 TemplateRef 的私有 API 做到了这一点.这是我目前使用的功能:
@ContentChildren(TemplateRef) 模板:QueryList;getTemplate(id: string): TemplateRef{//修正:不应使用私有 API...返回 this.templates ?this.templates.find((template: any) =>template._def.references[id]) : null;}
但这不适用于生产版本,实际上我发现您的帖子正在寻找另一个解决方案,如果我找到某些东西或向 Angular github 提交功能请求,我会更新.与此同时,我认为值得分享.
-- 编辑-看起来确实有一个使用结构指令的可能解决方案.
<块引用>您将在本指南中了解到星号 (*) 是一种方便的表示法,而字符串是一种微语法,而不是通常的模板表达式.Angular 将此符号脱糖为一个标记的
,它围绕着宿主元素及其后代.每个结构指令对该模板执行不同的操作.
文档链接
-- 编辑 2 --好的,它与检索 TemplateRef 的指令一起使用,但目前我使用 id 将其注册到服务,我不再使用 ViewChildren/ContentChildren.我的组件使用 *ngTemplateOutlet 指令然后使用服务检索 TemplateRef.
这是指令源代码:
@Directive({选择器:'[formeTemplate]'})导出类 FormeTemplateDirective {@Input('formeTemplate') templateId;构造函数(私有主机:TemplateRef,私有服务:FormeTemplateService){}ngOnInit() {this.service.register(this.templateId, this.host);}}
服务:
@Injectable()导出类 FormeTemplateService {私有模板:Array;构造函数(){this.templates = new Array();}注册(ID:字符串,参考:TemplateRef<任何>){this.templates.push(new FormeTemplate(id, ref));}getTemplateRef(templateId: string) : TemplateRef{let template = this.templates.find((template) => template.id === templateId);返回模板 ?模板.ref:空;}}
Say I have this template:
<div class="main__container">
<ng-template #test></ng-template>
<ng-template #test2></ng-template>
</div>
And I retrieve a reference to all TemplateRef
via:
@ViewChildren(TemplateRef)
private templates;
How can I, for all of them, retrieve the name of the associated variable? So "test" for the first template and "test2" for the other one. I don't absolutely want to use variables, if it's possible by using an attribute of ng-template
, it's OK. I tried with TemplateRef
, ViewContainerRef
and ElementRef
but everytime, it returns a reference to a comment
element.
I managed to do that using TemplateRef's private API. Here's the function I use at the moment :
@ContentChildren(TemplateRef) templates: QueryList<TemplateRef<any>>;
getTemplate(id: string): TemplateRef<any> {
// FIXME: Should not use private API...
return this.templates ? this.templates.find((template: any) =>
template._def.references[id]) : null;
}
But this doesn't work with a production build, actually I found your post looking for another solution, I'll update if I find something or submit a feature request to Angular github. In the meantime I thought it would be worth sharing.
-- EDIT -- It really looks like there is a possible solution using a structural directive.
You'll learn in this guide that the asterisk (*) is a convenience notation and the string is a microsyntax rather than the usual template expression. Angular desugars this notation into a marked-up
<ng-template>
that surrounds the host element and its descendents. Each structural directive does something different with that template.
Link to documentation
-- EDIT 2 -- Ok it works with a directive that retrieve the TemplateRef, but for the moment I register it to a service using an id, I don't use ViewChildren/ContentChildren anymore. My Component which use *ngTemplateOutlet directive then retrieve the TemplateRef using the service.
Here's the directive source code :
@Directive({
selector: '[formeTemplate]'
})
export class FormeTemplateDirective {
@Input('formeTemplate') templateId;
constructor(private host: TemplateRef<any>, private service: FormeTemplateService) { }
ngOnInit() {
this.service.register(this.templateId, this.host);
}
}
The service :
@Injectable()
export class FormeTemplateService {
private templates: Array<FormeTemplate>;
constructor() {
this.templates = new Array();
}
register(id: string, ref: TemplateRef<any>) {
this.templates.push(new FormeTemplate(id, ref));
}
getTemplateRef(templateId: string) : TemplateRef<any> {
let template = this.templates.find((template) => template.id === templateId);
return template ? template.ref : null;
}
}
这篇关于检索与 TemplateRef 关联的变量的名称的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论