按Id获取ViewChildren模板

Question

在我的组件中，我使用ViewChildren获得了它的标记模板的列表：

@ViewChildren(TemplateRef) private _templates: QueryList<TemplateRef<unknown>>;

在Angular8中，我无法通过Id对它们进行筛选，因此我需要查找内部属性--这在某种程度上有点麻烦：

let template = this._templates.find(t => (<any>t)._def.references[id]) : null;

现在，角度9，这不再起作用了。我检查了这个对象，发现了一个新的“黑客”：

this._templates.find(t => (<any>t)._declarationTContainer?.localNames?.includes(id)) : null;

但是，对于这种情况有什么新的或干净的解决方案吗？

仍然希望有一个没有定制指令的解决方案，例如。MatTab可能也会做类似的事情：

<mat-tab>
    <ng-template mat-tab-label>
        ...
    </ng-template>

    <ng-template matTabContent>
        ...
    </ng-template>
</mat-tab>

Answer 1

对于您的场景，一个干净的解决方案是使用NgTemplateNameDirective选择器创建一个ng-template[name]指令：

import { Directive, Input, TemplateRef } from '@angular/core';

@Directive({
  selector: 'ng-template[name]'
})
export class NgTemplateNameDirective {
  @Input() name: string;

  constructor(public template: TemplateRef<any>) { }
}

然后创建如下模板：

<ng-template name="t1"></ng-template>
<ng-template name="t2"></ng-template>

然后查询NgTemplateNameDirective而不是TemplateRef

@ViewChildren(NgTemplateNameDirective) private _templates: QueryList<NgTemplateNameDirective>;

并最终按名称搜索模板。

getTemplateRefByName(name: string): TemplateRef<any> {
  const dir = this._templates.find(dir => dir.name === name);
  return dir ? dir.template : null
}

在两个视图引擎( ViewEngine和Ivy )中都工作得很好。

Ng-运行示例