Angular中TemplateRef<any>类型的content是什么？如何用TS生成该对象？

1. content参数到底是什么 #

你在模板中传入的content本质是Angular的TemplateRef类型实例，你觉得自己没有声明过，是因为它的声明在同页面的HTML模板中：你肯定在当前组件的HTML里写了一个带#content模板引用变量的<ng-template>标签，标签内部就是模态框的内容结构。
Angular编译模板时，会自动把所有带#变量名的<ng-template>元素封装成TemplateRef实例，你在同页面的模板表达式（比如(click)绑定的方法参数）里直接写这个变量名，就能拿到对应的TemplateRef对象，不需要你在TS文件里额外声明。
TemplateRef本身是Angular对未渲染的内嵌DOM模板的封装，存在内存中，modalService.open方法拿到它之后，会把模板内部的DOM结构渲染到模态框的弹出容器里，这就是你的模态框能正常弹出的原因。

小优化提示：你当前TS代码里content:object的类型声明可以改成content: TemplateRef<any>，能获得更准确的类型提示，避免类型错误。

2. 如何在TypeScript中获取/生成该对象 #

有两种常用实现方式：

• 方式1：从现有模板中获取
  用@ViewChild装饰器直接获取模板中的TemplateRef实例，不需要在点击事件里传参：
  首先TS代码里添加引用：

  import { ViewChild, TemplateRef, AfterViewInit } from '@angular/core';
  
  export class YourComponent implements AfterViewInit {
    // 对应HTML里#content的模板引用
    @ViewChild('content') modalContent: TemplateRef<any>;
  
    ngAfterViewInit() {
      // 必须在这个生命周期之后才能拿到实例，ngOnInit阶段是undefined
      console.log(this.modalContent);
    }
  
    openModal(note:object) {
      this.modalTitle = note['author'];
      this.modalDate = note['date'];
      this.modalBody = note['comment'];
      this.commentProperty = note['property'];
      // 直接用TS里拿到的模板实例
      this.modalService.open(this.modalContent, {ariaLabelledBy: 'modal-basic-title'})    
    }
  }
  

  对应的HTML里点击事件可以简化成(click)="openModal(note)"。
• 方式2：完全用TS动态生成（无需提前写HTML模板）
  ng-bootstrap的modalService.open方法本身支持直接传入组件类作为内容，不需要依赖TemplateRef：
  1. 先创建一个独立的模态框内容组件，比如ModalContentComponent，在里面写好模态框的逻辑和模板
  2. 在当前组件中直接调用：

  openModal(note:object) {
    const modalRef = this.modalService.open(ModalContentComponent, {ariaLabelledBy: 'modal-basic-title'});
    // 可以通过modalRef.componentInstance给内容组件传参
    modalRef.componentInstance.note = note;
  }
  

  这种方式适合模态框逻辑复杂、需要复用的场景，如果你的Angular版本没有启用Ivy编译，需要把动态创建的组件加到对应NgModule的entryComponents数组中。

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