使用ChangeDetectionStrategy.OnPush时Angular Dialog需额外点击的问题解决

当主组件启用ChangeDetectionStrategy.OnPush变更检测策略时，Angular只会在以下场景触发组件的变更检测：

• 组件的输入属性(@Input)发生变化
• 组件自身触发了用户事件（比如点击、输入）
• 手动调用变更检测方法

MatDialog.open()初始化弹窗的逻辑，默认运行在Angular的变更检测周期之外。此时主组件没有满足任何触发变更检测的条件，导致弹窗的DOM渲染没有被Angular同步到视图中，必须通过额外点击（触发组件事件，进而触发变更检测）才能让弹窗正常显示。

下面是几种不需要移除OnPush的解决方法：

方法1：手动触发主组件变更检测 #

在主组件中注入ChangeDetectorRef，在打开弹窗后手动调用detectChanges()，强制Angular执行变更检测：

import { ChangeDetectorRef, ChangeDetectionStrategy, Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MyDialogComponent } from './my-dialog.component';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="openDialog()">Open Dialog</button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  constructor(
    private dialog: MatDialog,
    private cdr: ChangeDetectorRef
  ) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(MyDialogComponent);

    dialogRef.afterClosed().subscribe(result => {
      console.log('Dialog closed');
    });

    // 手动触发变更检测，同步弹窗渲染状态
    this.cdr.detectChanges();
  }
}

方法2：用NgZone包裹弹窗打开逻辑 #

将弹窗的初始化逻辑放在NgZone.run()中，确保代码运行在Angular的Zone上下文内，自动触发变更检测：

import { NgZone, ChangeDetectionStrategy, Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MyDialogComponent } from './my-dialog.component';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="openDialog()">Open Dialog</button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  constructor(
    private dialog: MatDialog,
    private zone: NgZone
  ) {}

  openDialog(): void {
    this.zone.run(() => {
      const dialogRef = this.dialog.open(MyDialogComponent);

      dialogRef.afterClosed().subscribe(result => {
        console.log('Dialog closed');
      });
    });
  }
}

补充说明 #

弹窗组件本身的OnPush策略不需要调整，因为弹窗的关闭逻辑是自身事件触发，会正常触发变更检测。

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