如何在Angular指令中获取宿主组件的TemplateRef？

Component1 代码 #

我有一个包含ng-template及内容的组件：

<ng-template #content><ng-content></ng-content></ng-template>

指令相关问题 #

我尝试在指令中通过@ViewChild获取这个TemplateRef，但始终为空（已在ViewInit和ContentAfterInit钩子中尝试），需要将该模板引用传入服务以打开模态框：

@ViewChild('content') public templateref: TemplateRef<any>;

组件使用方式 #

<app-component1 directive1> 
  <app-anothercomponent>.....</app-anothercomponent>
  <app-component2> .... </app-component2>
</app-component1>

请问是否可以在指令中获取这个ng-template的内容？

可以通过以下几种方式实现：

1. 改用ContentChild查询
   指令作用在app-component1上，#content属于组件的内容子元素，@ViewChild仅能查询指令自身所在组件的视图，因此需要替换为@ContentChild：

@ContentChild('content') public templateref: TemplateRef<any>;

2. 在正确的生命周期钩子中访问
   确保在AfterContentInit钩子中处理模板引用，此时内容子元素已初始化完成：

ngAfterContentInit(): void {
  if (this.templateref) {
    // 将模板引用传入服务的逻辑
  }
}

3. 通过组件实例暴露模板引用
   如果#content是app-component1内部的视图元素，指令无法直接查询，可让组件主动暴露该模板：

// app-component1 组件类
@ViewChild('content') public contentTemplate: TemplateRef<any>;

然后在指令中注入组件实例获取：

constructor(private component1: Component1) {}

ngAfterViewInit(): void {
  const templateref = this.component1.contentTemplate;
  if (templateref) {
    // 使用模板引用的逻辑
  }
}

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