Angular组件如何在@Input属性myValue变更时调用myMethod方法

你现有代码首先需要删掉重复声明的myValue: any;行（已经有带@Input装饰的声明，重复声明会导致逻辑异常），以下是两种常用实现方案：

方案1：使用@Input Setter（推荐单属性监听场景） #

直接给输入属性加set访问器，每次属性值更新时setter会自动触发：

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.component.scss'],
})
export class MyComponent {
  // 用私有变量存储实际值
  private _myValue: any;

  // 给@Input加setter
  @Input() 
  set myValue(val: any) {
    this._myValue = val;
    // 值更新时自动调用目标方法
    this.myMethod();
  }
  get myValue() {
    return this._myValue;
  }

  constructor() {}

  private myMethod() {
    // 你的业务逻辑
  }
}

该方案代码更简洁，只监听单个输入属性变化时优先选这个方案。

方案2：使用ngOnChanges生命周期钩子（推荐多属性监听场景） #

如果需要同时监听多个输入属性变化，或者需要对比变化前后的值，可以用Angular内置的OnChanges生命周期：

// 先导入所需类型
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.component.scss'],
})
export class MyComponent implements OnChanges {
  @Input() myValue: any;
  // 如果有其他@Input属性也可以在这里声明

  constructor() {}

  // 实现OnChanges接口的方法
  ngOnChanges(changes: SimpleChanges): void {
    // 过滤只处理myValue的变化
    if (changes['myValue']) {
      // 如果需要拿到变化前后的值可以用：
      // const oldVal = changes['myValue'].previousValue;
      // const newVal = changes['myValue'].currentValue;
      this.myMethod();
    }
  }

  private myMethod() {
    // 你的业务逻辑
  }
}

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