Angular12动态加载组件报NG0100、返回页组件消失如何解决？

问题根因 #

1. @ViewChildren 查询返回的 QueryList 仅在视图首次初始化完成后才会赋值，你当前仅在 ngAfterViewInit 中执行一次加载逻辑，当路由返回组件被复用时，ngAfterViewInit 不会重新触发，且此时视图重新渲染导致QueryList 还未完成更新，就会出现 this.headerComponents 未定义的问题。
2. ngAfterViewInit 生命周期中直接修改视图（动态创建组件），会触发Angular开发模式下的变更检测不一致校验，也就是你遇到的NG0100错误。
3. 没有监听QueryList的变化事件，当buttonArray动态更新、组件复用重绘时，无法同步更新动态组件。

修复方案 #

1. 调整TS逻辑 #

• 订阅headerComponents的changes可观察对象，只要锚点指令集合更新就自动执行加载逻辑
• 引入ChangeDetectorRef手动触发变更检测，避免NG0100错误
• 添加销毁逻辑取消订阅，防止内存泄漏

修改后的代码如下：

import { Component, Input, ViewChildren, QueryList, AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { Subscription } from 'rxjs';

// 原有其他导入保持不变
@Input('buttons')
buttonArray: Array<HeaderSubComponentHolder>;

@ViewChildren(HeaderComponentDirective)
headerComponents: QueryList<HeaderComponentDirective>;

private headerSub: Subscription;

constructor(
  private componentFactoryResolver: ComponentFactoryResolver,
  private cdr: ChangeDetectorRef
) {}

ngAfterViewInit(): void {
  // 首次加载执行一次
  this.loadButtons();
  // 监听QueryList变化，后续只要锚点更新就重新加载
  this.headerSub = this.headerComponents.changes.subscribe(() => {
    this.loadButtons();
  });
  // 手动标记变更，解决NG0100错误
  this.cdr.detectChanges();
}

ngOnDestroy(): void {
  // 销毁时取消订阅避免内存泄漏
  this.headerSub?.unsubscribe();
}

loadButtons() {
  // 先做边界判断，避免未定义报错
  if (!this.headerComponents || !this.buttonArray || this.headerComponents.length !== this.buttonArray.length) {
    return;
  }
  for (let i = 0; i < this.headerComponents.length; i++) {
    const headComponent = this.headerComponents.get(i);
    const button: HeaderSubComponentHolder = this.buttonArray[i];
    const viewContainerRef: ViewContainerRef = headComponent.viewContainerRef;
    const factory = this.componentFactoryResolver.resolveComponentFactory(
      button.type
    );
    viewContainerRef.clear();
    const componentRef =
      viewContainerRef.createComponent<HeaderSubComponent>(factory);
    componentRef.instance.data = button.data;
  }
}

2. 可选优化（适配路由复用场景） #

如果你的路由配置了路由复用策略，可以额外在路由激活钩子中增加判断，当组件被激活时主动触发一次加载逻辑：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute, /* 其他注入保持不变 */) {}

ngOnInit() {
  this.route.params.subscribe(() => {
    // 路由参数变化时如果组件复用，主动触发一次加载
    if (this.headerComponents) {
      this.loadButtons();
      this.cdr.detectChanges();
    }
  })
}

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