Angular：父组件模板变更后如何调用子组件方法

当前问题的核心是：Angular中store的订阅回调是同步执行的，而模板的DOM更新（比如[fxFlex]更新侧边栏宽度）是在变更检测周期的微任务阶段完成的，导致resizeTerm()先于DOM尺寸变更执行，Web Shell拿不到最新的容器宽度。

下面是几种可行的解决方法：

方法一：用setTimeout延迟执行resize #

利用JavaScript的事件循环机制，setTimeout会把任务放到宏任务队列，等待当前所有微任务（包括Angular的DOM更新）完成后再执行。修改子组件的订阅逻辑：

store$.pipe(...).subscribe(() => {
  // 0秒延迟确保DOM已更新
  setTimeout(() => this.resizeTerm(), 0);
});

优点：实现简单，无需额外依赖；缺点：依赖事件循环，极端情况下可能有微小延迟（几乎可以忽略）。

方法二：利用Angular的NgZone.onStable事件 #

NgZone的onStable事件会在Angular完成所有变更检测和DOM更新后触发，能精准捕获DOM更新完成的时机：

import { NgZone } from '@angular/core';
import { take } from 'rxjs/operators';

constructor(private ngZone: NgZone) {}

// 在订阅回调中
store$.pipe(...).subscribe(() => {
  // take(1)确保只执行一次，避免内存泄漏
  this.ngZone.onStable.pipe(take(1)).subscribe(() => {
    this.resizeTerm();
  });
});

优点：精准匹配Angular的生命周期，无多余延迟；缺点：需要导入RxJS操作符，代码稍复杂。

方法三：父组件主动通知子组件 #

父组件在DOM更新完成后，通过服务或直接引用通知子组件执行resize：

1. 定义一个共享服务 #

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SidenavResizeService {
  // 用于发送resize通知的Subject
  resizeTrigger$ = new Subject<void>();

  notifyResize() {
    this.resizeTrigger$.next();
  }
}

2. 父组件修改toggleMenu方法 #

constructor(private sidenavResizeService: SidenavResizeService) {}

toggleMenu(){
  this.isCollapsed = !this.isCollapsed;
  this.store$.dispatch(sidenavUpdated(data));
  // 等待DOM更新完成后发送通知
  setTimeout(() => {
    this.sidenavResizeService.notifyResize();
  }, 0);
}

3. 子组件订阅通知 #

constructor(private sidenavResizeService: SidenavResizeService) {}

ngOnInit() {
  this.sidenavResizeService.resizeTrigger$.subscribe(() => {
    this.resizeTerm();
  });
}

优点：组件间职责清晰，父组件控制通知时机；缺点：需要新增服务，适合复杂场景。

方法四：用ResizeObserver监听容器尺寸变化 #

直接监听子组件所在内容容器的尺寸变化，不管是什么原因导致的尺寸变更，都能触发resize：

import { ElementRef, ViewChild } from '@angular/core';

// 假设子组件的容器有模板引用#shellContainer
@ViewChild('shellContainer') shellContainer!: ElementRef<HTMLElement>;
private resizeObserver: ResizeObserver | null = null;

ngAfterViewInit() {
  this.resizeObserver = new ResizeObserver(() => {
    this.resizeTerm();
  });
  this.resizeObserver.observe(this.shellContainer.nativeElement);
}

ngOnDestroy() {
  if (this.resizeObserver) {
    this.resizeObserver.disconnect();
  }
}

优点：最可靠，能捕获所有导致容器尺寸变化的操作（包括浏览器窗口resize、菜单折叠等）；缺点：需要处理元素引用和Observer的销毁，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Raz-Dva