檢測組件輸入的屬性何時以角度變化

Question

我有一個角度組件，它有一個輸入Person

export class Person {
  public name = 'Initial Name';
}

export class PersonComponent implements OnInit, OnChanges {
  @Input() public person: Person;

  ngOnChanges(changes: SimpleChanges): void {
    console.log('changed');
  }
}

在此組件的父組件中，如果我替換作為子組件的輸入的Person對象，則會在子組件中ngOnChanges() 。

但是，如果我只從父組件更改Person對象的name ，則不會在子組件中觸發ngOnChanges() （無論如何，如果我將人名綁定到子模板中的html元素，它會更新）。

當輸入的屬性發生變化時，有沒有辦法在子組件中得到通知？

Answer 1

不，ngOnChanges掛鈎只會在引用更改時觸發。 在更改父組件中的name屬性時，您可以通過執行此操作輕松實現目標：

this.person = {...this.person, name: 'new value'};

Answer 2

您總是可以在Person上創建一個Observable，只要屬性發生變化就會發出。

從'rxjs'導入{Subject};

export class Person {

  private _changes = new Subject<any>();
  private _name = 'Initial Name';

  // subscribe to this one
  public changes = this._changes.asObservable();

  set name(newName: string) {
    this._name = newName;
    this._changes.next({'name': newName});
  }

  get name() {
    return this._name;
  }

}

這樣，您可以訂閱person.changes ，每次更改name都會發出一個值

當你編寫person.name = 'Fred' ，將調用setter，后者將從Observable中發出新值。

Answer 3

為什么你需要你的孩子知道這個變化？ 在您的孩子中，您應該只更改與孩子相關的事物並將其冒泡到父母身上。 使用Observables，孩子仍然可以更容易地顯示信息。 我建議使用@Output然后更改父對象

Answer 4

如果使用getter，每次給出一個值時都會執行setter。 因此，解決方法可以有兩個變量

  @Input() person;
  @Input() 
  set changePerson(value)
  {
    console.log(this.person);
  }

所以，在你的父母，你可以寫

  <app-child [person]="person" [changePerson]="changePerson"></app-child>

  this.person.name="new name";
  this.changePerson=true;

另一種選擇是在每次更改時使用服務中的EventEmitter

    //Our service
    @Injectable({
      providedIn: 'root',
    })
    export class ChangeService {
      changed: EventEmitter<any>=new EventEmitter();
      emit(value:any)
      {
          this.changed.emit(value);
      }
    }

//Our parent
constructor (private changeService:ChangeService){}
  ngOnInit()
  {
    setTimeout(()=>{
      this.changeService.emit(this.person)

    })
    setTimeout(()=>{
      this.person.name="George";
      this.changeService.emit(this.person);
    },5000);
  }

//Our child
  person:any;
  ngOnInit() {
    this.changeService.changed.subscribe(res=>{
      this.person=res;
      console.log(res);
    })
  }