如何在ViewChild和ViewChildren中访问ng-template？

嘿，我来帮你搞定Angular里用ViewChild和ViewChildren访问ng-template的问题！你已经给模板加了引用变量（#col1、#col_2），这就成功了一半，下面一步步来实操：

如果你需要单独获取某一个特定的ng-template（比如你的#col1或者#col_2），可以按以下步骤来：

首先在组件类里导入必要的依赖：

import { Component, ViewChild, TemplateRef, AfterViewInit } from '@angular/core';

然后在组件类中声明对应的ViewChild属性，绑定模板的引用变量：

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  // 绑定#col1对应的模板
  @ViewChild('col1') col1Template!: TemplateRef<any>;
  // 绑定#col_2对应的模板
  @ViewChild('col_2') col2Template!: TemplateRef<any>;

  ngAfterViewInit(): void {
    // 只有在这个生命周期钩子中，才能安全访问到模板引用
    console.log('获取到col1模板:', this.col1Template);
    console.log('获取到col_2模板:', this.col2Template);

    // 如果需要把模板渲染到视图中，还可以结合ViewContainerRef操作
    // 比如：this.targetContainer.createEmbeddedView(this.col1Template);
  }
}

注意：一定要在ngAfterViewInit里访问模板引用——因为只有当视图完全初始化完成后，Angular才会把模板实例赋值给ViewChild变量。

如果你想一次性获取所有ng-template（或者某个容器内的所有模板），可以用ViewChildren来实现：

先导入所需依赖：

import { Component, ViewChildren, TemplateRef, QueryList, AfterViewInit } from '@angular/core';

然后在组件类中声明对应的查询属性：

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  // 获取页面中所有的TemplateRef实例
  @ViewChildren(TemplateRef) allTemplates!: QueryList<TemplateRef<any>>;

  // 如果你只想获取#gridView容器内的模板，可以结合容器的ViewContainerRef
  @ViewChild('gridView', { read: ViewContainerRef }) gridContainer!: ViewContainerRef;

  ngAfterViewInit(): void {
    // 遍历所有获取到的模板
    console.log('页面中所有模板:', this.allTemplates);
    this.allTemplates.forEach(template => {
      console.log('单个模板实例:', template);
    });

    // 如果你需要更精准地筛选gridView内的模板，也可以给模板添加自定义指令，再通过指令来查询
    // 不过对于你的现有代码，上面的方式已经能满足需求了
  }
}

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