检索与 TemplateRef 关联的变量的名称 [英] Retrieve the name of variable associated with TemplateRef

问题描述

假设我有这个模板:

<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屋！