Angular如何监听changeAddressPermision变量变化并等待弹窗点击后执行操作

以下是三种适配不同场景的实现方式：

方案1：Setter属性监听（最轻量，推荐优先使用） #

把变量changeAddressPermision改为带setter的属性，变量赋值时自动触发对应逻辑，不需要修改现有模板代码：

// 组件类代码
private _changeAddressPermision = false;
isPopupClosed = true;

get changeAddressPermision() {
  return this._changeAddressPermision;
}
set changeAddressPermision(val: boolean) {
  this._changeAddressPermision = val;
  // 赋值时直接触发目标函数
  this.x(val);
}

// 目标函数x
x(permission: boolean) {
  if (permission) {
    // 用户点击确认，执行修改地址逻辑
  } else {
    // 用户点击取消，执行取消分支逻辑
  }
}

// 打开弹窗的触发方法
openAddressPopup() {
  this.isPopupClosed = false;
  // 打开弹窗时重置变量，避免上次操作结果影响本次判断
  this._changeAddressPermision = false;
}

该方案无需引入额外依赖，现有模板代码完全不需要改动。

方案2：RxJS Subject监听（适合多位置监听变量的复杂场景） #

如果你需要在多个组件/服务中监听这个变量的变化，可以用RxJS的Subject实现：

import { Subject, takeUntil } from 'rxjs';
import { OnInit, OnDestroy } from '@angular/core';

export class YourComponent implements OnInit, OnDestroy {
  changeAddressPermision$ = new Subject<boolean>();
  isPopupClosed = true;
  private destroy$ = new Subject<void>();

  ngOnInit() {
    // 订阅变量变化
    this.changeAddressPermision$.pipe(
      takeUntil(this.destroy$)
    ).subscribe(permission => {
      this.x(permission);
    })
  }

  x(permission: boolean) {
    // 业务逻辑和方案1一致
  }

  openAddressPopup() {
    this.isPopupClosed = false;
  }

  ngOnDestroy() {
    // 组件销毁时结束订阅，避免内存泄漏
    this.destroy$.next();
    this.destroy$.complete();
  }
}

需要对应修改模板的点击事件：

<div *ngIf="!isPopupClosed" class="popup">
    <p class="popup__text">Are you sure you want to change address?</p>
    <div class="popup-button__div">
        <button class="popup__button" (click)="isPopupClosed = true; changeAddressPermision$.next(true)">Yes</button>
        <button class="popup__button" (click)="isPopupClosed = true; changeAddressPermision$.next(false)">Cancel</button>
    </div>
</div>

方案3：Signal + Effect 监听（Angular 16+ 推荐写法） #

如果你使用Angular 16及以上版本，可以用官方推荐的Signal实现响应式监听：

import { signal, effect } from '@angular/core';

export class YourComponent {
  changeAddressPermision = signal(false);
  isPopupClosed = signal(true);

  constructor() {
    effect(() => {
      const permission = this.changeAddressPermision();
      // 仅弹窗关闭时触发逻辑，避免初始化时误执行
      if (this.isPopupClosed()) {
        this.x(permission);
      }
    })
  }

  x(permission: boolean) {
    // 业务逻辑和方案1一致
  }

  openAddressPopup() {
    this.isPopupClosed.set(false);
    this.changeAddressPermision.set(false);
  }
}

对应模板修改为：

<div *ngIf="!isPopupClosed()" class="popup">
    <p class="popup__text">Are you sure you want to change address?</p>
    <div class="popup-button__div">
        <button class="popup__button" (click)="isPopupClosed.set(true); changeAddressPermision.set(true)">Yes</button>
        <button class="popup__button" (click)="isPopupClosed.set(true); changeAddressPermision.set(false)">Cancel</button>
    </div>
</div>

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