从 QueryList 中识别特定的 Angular TemplateRef

Question

在 Angular 6/7 中，我有一个组件，我将内容投影到其中（ParentComponent 模板）：

<my-component [templateNames]="['t1', 't2']">
  <ng-template name="t1">...</ng-template>
  <ng-template name="t2">...</ng-template>
  <ng-template>...</ng-template> <!-- not included in [templateNames] -->
</my-component>

在MyComponent 类中，我可以使用 ContentChildren 装饰器获取所有模板的 QueryList：

@ContentChildren(TemplateRef) templates: QueryList<TemplateRef<any>>;

挑战在于我想在特定模板上执行代码，该模板由 ParentComponent 通过 @Input() templateNames 设置的内容标识。

processTemplates() {
  for (const name of this.templateNames) {
    const templateRef = this.getTemplateByName(name);
    this.doWork(templateRef);
  }
}

getTemplateByName(name) {
  const templates = this.templates.toArray();

  return templates.find(t => ?); // what can I query to distinguish templates?
}

问题是我不知道如何读取name 属性或我在ParentComponent 中的ng-template 标记上设置的任何其他内容。我不知道如何区分一个 TemplateRef 和另一个；

请记住，MyComponent 不能对将使用什么名称或是否应该处理所有 ng-templates 做出任何假设——我的示例中的最后一个上面的内容不应该得到处理，因为它没有在 @Input() 模板名称 中列出。我可以在 ParentComponent 中设置什么来帮助我区分这两个 TemplateRef 吗？

Answer 1

您可以使用名称输入参数创建指令：

@Directive({
  selector: '[template-name]'
})
export class TableColumnDirective {

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

  @Input('template-name') columnName: string;
}

这样使用：

  <my-component>
      <ng-template template-name="t1">...</ng-template>
      <ng-template template-name="t2">...</ng-template>
      ...

然后以my-component 的方式注入：

@ContentChildren(TableColumnDirective) templates: QueryList<TableColumnDirective>;

有关更详细的解释/示例，请查看接受的答案from this question

Answer 2

您可以选择以下方法之一：

如果它仅适用于 2 个组件，您可以使用 QueryList getter（第一个和最后一个）访问它们

@ContentChildren(TemplateRef) templates: QueryList<TemplateRef<any>>;

ngAfterContentInit() {
    console.log(this.templates.first);    // Gives you the 1st template child
    console.log(this.templates.last);     // Last template child (2nd child)     
}

按索引查找

this.templates.find((template, index) => index == 1); // 2nd template child

---

其他选择

使用组件上的扩展创建了 Stackblitz Demo

1.) 创建 TemplateContentComponent 这将作为您的 ChildComponent 并添加 @Input()

    @Component({
      selector: 'template-content',
      template: `
          // If no ng-template reference available, show its ng-content
          <ng-content *ngIf="!template"></ng-content>

         // Else, show the ng-template through ng-container
         <ng-container *ngIf="template"
                       [ngTemplateOutlet]="template"></ng-container>
      ` 
    })
    export class TemplateContentComponent {
        @Input() name: string;    // Serves as your component id
    }

2.) 创建 TemplateContainerComponent - 这将用作您的 ParentComponent

 @Component({
  selector: 'template-container',
  template: `<ng-content></ng-content>`
})
export class TemplateContainerComponent implements AfterContentInit  {

    @ContentChildren(TemplateContentComponent) templates: QueryList<TemplateRef<any>>;

      ngAfterContentInit() {
        // You can now check whether you'll be fetching a template
        // based on the names you want provided from parent template.

        const t1 = this.templates.find((template: any) => template.name === 't1');

        console.log(t1);   // This will show the t1 component
                           // which t1 and t2 are the same component
                           // but had set a name @Input() as their ID
      }

    }

3.) 在您的 AppComponent 模板上

<template-container>
  // Can be a raw template, good for ng-content
  <template-content [name]="'t1'">t1 template</template-content>

  // Or a template from ng-template, good for ng-container
  <template-content [name]="'t2'"
                    [template]="userList"></template-content>
</template-container>


// User List Template
<ng-template #userList>
  <h1>User List</h1>
</ng-template>