Angular中如何从ng-container获取ViewContainerRef及相关疑问

我参考Angular官方《动态组件加载》指南实现了运行时动态组件加载，指南要求定义锚点告知Angular组件插入位置，随后创建自定义指令获取ViewContainerRef来调用createComponent()函数。我有以下疑问：

1. 为何使用ng-template？能否改用ng-container？
2. 能否不创建自定义指令，直接通过#ref标记和@ViewChild从ng-template获取ViewContainerRef？
3. 渲染后的<!--container-->注释是否与模板中未出现的元素相关？

**更新：**我已实现不使用自定义指令的相同效果，但仍有困惑，相关代码如下：

官方示例代码 #

自定义锚点指令 #

@Directive({
  selector: '[adHost]',
})
export class AdDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

使用指令的广告横幅组件 #

@Component({
  selector: 'app-ad-banner',
  template: `
    <div class="ad-banner-example">
      <h3>Advertisements</h3>
      <ng-template adHost></ng-template>
    </div>
  `
})
export class AdBannerComponent implements OnInit, OnDestroy {
  
  @ViewChild(AdDirective, {static: true}) adHost!: AdDirective;
  ...
  loadComponent() {
    ...
    viewContainerRef.createComponent<AdComponent>(adItem.component);
    ...
  }
}

渲染后的DOM结构 #

<div class="ad-banner-example">
      <h3>Advertisements</h3>
      <ng-component>
        <div class="hero-profile"><h3>Featured Hero Profile</h3><h4>Dr. IQ</h4>
          <p>Smart as they come</p><strong>Hire this hero today!</strong></div>
      </ng-component>
      <!--container-->
 </div>

我实现的无自定义指令版本 #

@Component({
  selector: 'app-ad-banner',
  template: `
    <div class="ad-banner-example">
      <h3>Advertisements xxx</h3>
      <ng-template #insert_slot></ng-template>
    </div>
  `
})
export class AdBannerComponent implements AfterViewInit, OnDestroy {

  @ViewChild('insert_slot', {read: ViewContainerRef}) adHost!: ViewContainerRef;

  ngAfterViewInit(): void {
    this.loadComponent();
  }

  loadComponent() {
    ...
    this.adHost.clear();

    const componentRef = this.adHost.createComponent<AdComponent>(adItem.component);
    ...
  }
}

疑问解答 #

1. 为何使用ng-template？能否改用ng-container？

• ng-template是惰性模板容器，编译后不会生成任何DOM节点，仅作为占位符标记动态组件的插入位置，不会给DOM结构带来冗余内容，语义上完全匹配“动态组件锚点”的定位。
• 可以改用ng-container，但ng-container编译后会在DOM中留下<!--ng-container-->注释节点，虽然不影响功能，但相比ng-template多了一个冗余标记。另外ng-container更常用于分组模板元素（比如配合*ngIf/*ngFor减少DOM层级），用它做动态组件锚点语义不够精准。

2. 能否不创建自定义指令，直接通过#ref标记和@ViewChild获取ViewContainerRef？

完全可以，你自己的实现已经验证了这一点。通过@ViewChild('insert_slot', {read: ViewContainerRef})就能直接拿到ng-template对应的ViewContainerRef，无需额外创建指令。

官方示例用自定义指令的核心原因是复用性和语义化：如果多个组件/模板需要相同的动态组件锚点，指令可以统一封装逻辑；同时[adHost]的标记能明确告知开发者这是动态广告组件的宿主位置，可读性更强。但对于简单场景，直接用模板引用变量是更简洁的方案。

3. 渲染后的<!--container-->注释是什么？

这个注释是Angular内部生成的容器跟踪标记，和模板中未定义的元素无关。当你通过ViewContainerRef创建动态组件时，Angular会在DOM中插入这个注释节点，用来记录动态组件容器的位置，方便后续执行组件销毁、更新、替换等操作，属于Angular渲染机制的内部产物。

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