如何在Angular 2+中选择性渲染ngTemplateOutlet的指定部分？

嘿，我明白你的痛点！你现在用@ContentChild只能拿到第一个匹配的模板引用，所以两次*ngTemplateOutlet都渲染了AAA。要实现选择指定模板的需求，我们可以给指令加个标识属性，然后批量获取所有模板再筛选，具体做法如下：

步骤1：给指令添加标识输入属性 #

修改my-directive.directive.ts，添加一个输入属性来标记每个模板，同时把TemplateRef暴露出来方便后续获取：

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

@Directive({ selector: '[myDirective]' })
export class MyDirective {
  // 用指令选择器作为输入属性名，使用时可以直接写*myDirective="'标识'"
  @Input() myDirective!: string;

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

步骤2：在主组件中获取所有模板并添加筛选方法 #

修改main.component.ts，用@ContentChildren替代@ContentChild来获取所有MyDirective实例，然后添加一个根据标识获取对应模板的方法：

import { Component, ContentChildren, QueryList } from '@angular/core';
import { MyDirective } from './my-directive.directive';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html'
})
export class MainComponent {
  @ContentChildren(MyDirective) myTemplates!: QueryList<MyDirective>;

  // 根据传入的标识key返回对应的模板
  getTemplateByKey(key: string): TemplateRef<any> | undefined {
    return this.myTemplates.find(tpl => tpl.myDirective === key)?.templateRef;
  }
}

步骤3：在主组件模板中指定要渲染的模板 #

修改main.component.html，调用getTemplateByKey方法来选择不同的模板：

<ng-container *ngTemplateOutlet="getTemplateByKey('aaa')"></ng-container>
<ng-container *ngTemplateOutlet="getTemplateByKey('bbb')"></ng-container>

步骤4：在父组件中给模板添加标识 #

修改example.component.html，给每个*myDirective指定对应的标识：

<app-main>
  <div *myDirective="'aaa'"> AAA </div>
  <div *myDirective="'bbb'"> BBB </div>
</app-main>

这样运行后，浏览器就会正确显示<div>AAA</div><div>BBB</div>啦！

如果你更倾向于用类名来筛选，也可以在MyDirective中注入ElementRef，获取宿主元素的类列表，然后在getTemplateByKey方法中改成根据类名判断，但用自定义标识的方式更清晰可控，也更不容易和样式类冲突。

内容的提问来源于stack exchange，提问作者pbialy