Angular 10组件内部属性变更未触发OnChanges钩子问题咨询

Angular 的 ngOnChanges 生命周期钩子仅会响应被 @Input 装饰器标记的外部输入属性的变化，你代码中定义的 showInvoiceDetails 是组件内部的普通属性，不属于父组件传入的输入值，因此在组件内部修改它的值不会触发 ngOnChanges 钩子。

你可以根据业务需求选择以下任意一种方案实现对 showInvoiceDetails 变化的监听：

• 方案1：使用 getter/setter 包裹属性
  将原有属性改造为带setter的形式，直接在setter中执行你原本要写在ngOnChanges中的逻辑，示例代码如下：

  private _showInvoiceDetails = false;
  get showInvoiceDetails(): boolean {
    return this._showInvoiceDetails;
  }
  set showInvoiceDetails(value: boolean) {
    this._showInvoiceDetails = value;
    // 此处写入属性变化后需要执行的逻辑即可
    console.log('showInvoiceDetails 发生变化', value);
  }
  

• 方案2：直接在修改属性的方法中调用逻辑
  目前你仅在三个方法中修改showInvoiceDetails的值：changeInvoiceDetailsHandler、saveInvoiceDetailsHandler、cancelInvoiceDetailsHandler，直接在这三个方法修改属性值后调用你要执行的逻辑即可，是成本最低的实现方式。
• 方案3：用RxJS Subject包裹属性
  如果需要多处监听该属性变化，可以用BehaviorSubject来维护状态，示例如下：

  private showInvoiceDetails$ = new BehaviorSubject<boolean>(false);
  // 组件初始化时订阅变化
  ngOnInit() {
    this.showInvoiceDetails$.subscribe(val => {
      // 此处执行变化后的逻辑
    });
    // 原有其他初始化逻辑
  }
  // 修改属性时调用next方法
  changeInvoiceDetailsHandler() {
    this.showInvoiceDetails$.next(true);
  }
  

内容的提问来源于stack exchange，提问作者R. Wormsbecher