Angular Portal切换窗口后变更检测失效，求正确实现方案

你的问题核心在于组件实例复用导致的变更检测上下文断裂：当组件从子窗口的Portal Outlet被detach后，它的变更检测关联已经脱离了主应用的变更检测树；而你通过ngIf重新显示组件时，Angular没有自动把旧实例重新加入主变更检测循环，导致属性变更无法触发自动检测，必须手动调用detectChanges()。

核心思路是：关闭子窗口时彻底销毁旧组件实例，回到主窗口时重新创建新实例。新实例会自动加入主应用的变更检测树，无需手动干预。

1. 修改PortalService，销毁子窗口组件实例 #

在子窗口关闭时，不仅分离组件，还要销毁实例并清空引用，避免内存泄漏和实例复用问题：

import { DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal'; // 补充缺失的导入

@Injectable({ providedIn: 'root' })
export class PortalService {
  // ... 保留原有构造函数和其他方法

  private createPortal(popoutWindow: Window) {
    if(popoutWindow) {
      const outlet = new DomPortalOutlet(popoutWindow.document.body, this.componentFactoryResolver, this.applicationRef, this.injector);
      const containerRef: ComponentRef<PopoutComponent> = this.attachPopoutContainer(outlet);
      this.attachUnloadEventToPopoutWindow(popoutWindow);
      // 保存组件引用而非实例，方便后续销毁
      POPOUT_REFS['windowInstance'] = popoutWindow;
      POPOUT_REFS['containerRef'] = containerRef;
      POPOUT_REFS['portalOutlet'] = outlet;
    }
  }

  private attachUnloadEventToPopoutWindow(popoutWindow: Window) {
    popoutWindow.addEventListener("beforeunload", () => {
      const outlet = POPOUT_REFS['portalOutlet'];
      const containerRef = POPOUT_REFS['containerRef'];
      
      if (outlet && containerRef) {
        outlet.detach();
        containerRef.destroy(); // 彻底销毁组件实例
      }

      // 清空所有引用，避免内存泄漏
      POPOUT_REFS['windowInstance'] = null;
      POPOUT_REFS['containerRef'] = null;
      POPOUT_REFS['portalOutlet'] = null;

      this.eventService.publishPopoutEvent(true);
    });
  }

  // ... 保留其他方法
}

2. 优化MainComponent，移除手动变更检测 #

当子窗口关闭后，isAttached设为true，ngIf会自动重新创建组件实例，新实例的变更检测会正常工作，无需手动调用detectChanges()：

export class MainComponent implements OnInit {
  isAttached: boolean;
  num: number;

  constructor(
    private eventService: EventService,
    private portalService: PortalService,
    private changeDetectorRef: ChangeDetectorRef
  ) {
    this.isAttached = true;
    this.num = 0; // 初始化num
  }

  ngOnInit() {
    this.eventService.numberEvent$.subscribe(val => {
      this.num = val;
    });
    this.eventService.popoutEvent$.subscribe(val => {
      if (val != null) {
        this.handlePopoutComponent(val);
      }
    });
  }

  handlePopoutComponent(val: boolean) {
    this.isAttached = val;
    // 移除手动变更检测调用：this.changeDetectorRef.detectChanges();
    if (this.isAttached === false && !this.portalService.isPopoutWindowOpen()) {
      this.portalService.popOutComponent();
    }
  }

  onNumberPublish() {
    this.num += 1;
    this.eventService.publishNumberEvent(this.num);
  }
}

3. 替换不可靠的setTimeout，改用窗口load事件 #

之前用setTimeout延迟操作子窗口DOM容易引发竞态问题，改为监听子窗口的load事件更可靠：

private createWindow(target): Window {
  const ref = window.open("about:blank", "_blank", "height=400; width=400;directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=no;");
  
  ref.addEventListener('load', () => {
    ref.document.body.innerHTML = "";
    this.createPortal(ref); // 窗口加载完成后再创建Portal
  });

  return ref;
}

• 销毁旧实例：彻底切断子窗口组件与主应用的关联，避免变更检测上下文混乱。
• 重建新实例：新组件会自动注册到主应用的变更检测树，属性变更时Angular会自动触发检测。
• 移除setTimeout：让DOM操作时机更稳定，避免加载速度差异导致的错误。

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