Angular中viewContainerRef.createComponent创建动态组件不显示

动态组件无法渲染是3处代码写法问题导致，和教程逻辑无关，属于版本适配疏漏+基础写法错误：

• 宿主指令未公开暴露viewContainerRef实例，动态加载逻辑无法获取到可挂载组件的容器
• 组件加载时机错误：在ngOnInit阶段读取@ViewChild捕获的宿主容器，此时视图尚未完成初始化，捕获到的容器值为undefined，后续创建组件的逻辑实际没有执行
• Ivy渲染引擎适配问题：若父组件使用OnPush变更检测策略，动态创建组件后未手动触发变更检测，新组件节点不会同步到DOM树

按以下步骤逐行调整代码即可：

1. 修正宿主指令代码，确保容器实例可被外部访问

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[adHost]'
})
export class AdDirective {
  // 必须加public修饰符，否则外部组件无法读取该属性
  constructor(public viewContainerRef: ViewContainerRef) {}
}

2. 调整动态组件加载的执行时机，修正@ViewChild配置

import { AfterViewInit, ViewChild, Component } from '@angular/core';
import { AdDirective } from './ad.directive';
import { HelloComponent } from './hello.component';

@Component({
  selector: 'my-app',
  template: `<ng-template adHost></ng-template>`
})
export class AppComponent implements AfterViewInit {
  // 配置static: true，确保在初始化阶段可获取到宿主实例
  @ViewChild(AdDirective, { static: true }) adHost!: AdDirective;

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

  private loadDynamicComponent() {
    const container = this.adHost.viewContainerRef;
    // 清空容器原有内容
    container.clear();
    // 创建动态组件
    const componentRef = container.createComponent(HelloComponent);
    // 若动态组件有输入属性，可直接通过instance赋值
    // componentRef.instance.title = '动态组件测试';
  }
}

3. 若父组件使用OnPush变更检测策略，创建组件后手动触发视图更新

import { ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';

@Component({
  // ...其他配置
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit {
  constructor(private cdr: ChangeDetectorRef) {}

  private loadDynamicComponent() {
    // ...原有创建组件逻辑
    // 执行完创建逻辑后调用
    this.cdr.markForCheck();
  }
}

• Angular 13+ 版本默认启用Ivy渲染引擎，不需要再将动态组件注册到模块的entryComponents数组中，只要在模块declarations数组中声明即可正常加载
• 承载动态组件的宿主指令必须绑定在<ng-template>标签上，绑定到普通div等DOM节点会出现容器层级错误，导致组件渲染位置不符合预期
• 动态组件创建完成后，若需要给组件传递输入属性、监听输出事件，直接通过componentRef.instance访问实例即可，不需要额外做其他处理

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