【angular开发总结】- 组件监听属性变化的方式

1、通过 setter 截听输入属性值的变化

example:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-name-child',
  template: '<h3>"{{name}}"</h3>'
})
export class NameChildComponent {
  @Input()
  get name(): string { return this._name; }
  set name(name: string) {
    this._name = (name && name.trim()) || '<no name set>';
  }
  private _name = '';
}

2、 通过ngOnChanges()来截听输入属性值的变化

example:

@Input() userId: number;

ngOnChanges(changes: SimpleChanges) {
  // useId 属性值变更时
  if (changes.userId) {
    this.getData();
  }
}

3、通过setter截听组件自身属性值改变

example：监听组件自身属性userId变化

get userId(): number {
    return this._userId;
}
set userId(id: number) {
    this._userId = id;
    this.userIdChange()
}
private _userId: number;

更多angular组件交互可参考官方文档angular.cn/guide/compo…