Angular 19.2中双层<ng-template>嵌套结合指令与ContentChild无法获取二级指令的问题

嘿，我刚好在Angular 19.2里踩过类似的坑，结合你做自定义表格组件的场景，来给你好好捋捋这个双层嵌套下ContentChild拿不到二级指令的问题～

首先我得对齐下你的场景：你要做的app-table组件，应该是想支持父组件传入自定义列模板——比如用带自定义指令的<ng-template>来标记特殊列，然后在表格组件里通过ContentChild/ContentChildren获取这些指令，进而拿到对应列的模板和配置对吧？但因为用了双层<ng-template>嵌套（不管是父组件侧把列模板套进了另一个<ng-template>，还是表格组件内部的结构有双层嵌套），导致Angular的内容查询找不到内层的指令了。

先说说问题根源 #

Angular里的<ng-template>本身是个“惰性模板容器”，它不会被自动渲染，而且ContentChild/ContentChildren默认只会查询组件直接的内容投影区域，如果带指令的<ng-template>被嵌套在另一个<ng-template>里，它就不属于目标组件的直接投影内容了，Angular自然搜不到里面的指令。另外还有个常见小坑：如果你的自定义列指令是standalone的，要是没在表格组件的imports数组里导入，Angular根本识别不了这个指令，查不到也是必然的。

给你几个实用的解决方案 #

方案一：尽量避免不必要的<ng-template>嵌套

如果不是业务必须，直接把带自定义指令的<ng-template>作为app-table的直接子元素就行，别套进其他<ng-template>里。比如父组件里这么写：

<app-table [data]="tableData">
  <!-- 直接作为app-table的子元素，没有额外嵌套 -->
  <ng-template appColumn let-item key="name">
    <span class="text-bold">{{ item.name }}</span>
  </ng-template>
  <ng-template appColumn let-item key="age">
    {{ item.age }} 岁
  </ng-template>
</app-table>

这种情况下，只要表格组件里正确配置了ContentChildren，就能顺利拿到所有appColumn指令：

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  // 别忘了导入你的自定义指令！
  imports: [ColumnDirective]
})
export class TableComponent {
  @Input() data: any[] = [];
  @ContentChildren(ColumnDirective) columnDirectives!: QueryList<ColumnDirective>;

  ngAfterContentInit() {
    // 这里就能正常拿到所有列指令了
    console.log('所有列指令：', this.columnDirectives);
  }
}

方案二：必须嵌套时，用中间指令“搭桥”

如果业务需求真的需要嵌套<ng-template>（比如做动态列组、tab切换列这类场景），那可以给外层的<ng-template>也加个自定义指令，让它来“收集”内层的列指令，再传递给表格组件。

比如先整个appColumnGroup指令：

@Directive({ selector: '[appColumnGroup]', standalone: true })
export class ColumnGroupDirective {
  // 这个指令里用ContentChildren收集内层的所有appColumn指令
  @ContentChildren(ColumnDirective) columnDirectives!: QueryList<ColumnDirective>;
}

然后父组件里这么写：

<app-table [data]="tableData">
  <ng-template appColumnGroup>
    <!-- 内层的列模板嵌套在group模板里 -->
    <ng-template appColumn let-item key="name">{{ item.name }}</ng-template>
    <ng-template appColumn let-item key="age">{{ item.age }}</ng-template>
  </ng-template>
  <ng-template appColumn let-item key="email">{{ item.email }}</ng-template>
</app-table>

最后在表格组件里，同时查询直接的列指令和所有列组，再合并起来：

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [ColumnDirective, ColumnGroupDirective]
})
export class TableComponent {
  @Input() data: any[] = [];
  @ContentChildren(ColumnDirective) directColumns!: QueryList<ColumnDirective>;
  @ContentChildren(ColumnGroupDirective) columnGroups!: QueryList<ColumnGroupDirective>;

  ngAfterContentInit() {
    // 合并直接的列和所有组里的列
    const allColumns = [...this.directColumns];
    this.columnGroups.forEach(group => {
      allColumns.push(...group.columnDirectives);
    });
    // 现在allColumns里就是所有的列指令了
    console.log('所有列：', allColumns);
  }
}

方案三：组件内部嵌套时，手动创建EmbeddedView

如果是表格组件内部自己用了双层<ng-template>导致的问题，那你需要手动把内层模板的内容“激活”，并确保它在组件的内容查询范围内。比如在表格组件的模板里，你可以用ng-container结合*ngTemplateOutlet来渲染嵌套的模板，同时确保指令所在的模板被正确投影。

最后再提个容易忘的点 #

不管用哪个方案，一定要确保你的自定义指令是standalone: true的（如果你的组件是standalone的话），并且已经在表格组件的imports数组里导入了，不然Angular根本识别不了这些指令，再怎么查都是空的。

内容来源于stack exchange