EmbeddedViewRef与TemplateRef的区别及相关语句含义咨询

原文语句解释 #

“An embedded view can be referenced from a component other than the hosting component whose template defines it, or it can be defined independently by a TemplateRef.”

这句话的含义是：嵌入式视图既可以被定义它的宿主组件之外的其他组件引用，也可以通过TemplateRef来独立创建。

具体说明：

• 若你在某组件模板中用<ng-template>定义了模板片段，该组件就是这个模板的宿主组件，但借助EmbeddedViewRef，其他组件也能获取并使用这个已实例化的视图；
• 你也无需依赖特定组件的模板上下文，直接通过TemplateRef对象就能创建出独立的嵌入式视图实例。

EmbeddedViewRef与TemplateRef的核心区别 #

• TemplateRef：它是模板片段的引用对象，相当于“未实例化的模板蓝图”，仅保存模板结构和可绑定的上下文定义，本身不会被渲染到DOM中。必须调用其createEmbeddedView()方法，才能生成真正可渲染的视图。
• EmbeddedViewRef：它是已实例化的嵌入式视图实例，是可挂载到DOM中的实际视图对象。它包含视图对应的DOM节点、绑定的上下文数据，还提供destroy()等操作视图的方法。

代码示例 #

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

@Component({
  selector: 'app-example',
  template: `
    <ng-template #myTemplate let-userName>
      <div>Hello, {{userName}}!</div>
    </ng-template>
  `
})
export class ExampleComponent {
  @ViewChild('myTemplate') private myTemplate!: TemplateRef<any>;
  private embeddedView?: EmbeddedViewRef<any>;

  ngOnInit() {
    // 用TemplateRef创建EmbeddedViewRef实例
    this.embeddedView = this.myTemplate.createEmbeddedView({ userName: 'Alice' });
    // 将视图挂载到DOM中
    document.body.appendChild(this.embeddedView.rootNodes[0]);
  }

  ngOnDestroy() {
    // 销毁视图，释放资源
    this.embeddedView?.destroy();
  }
}

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