可觀察到的Angular2組件屬性變化

Question

當在angular 2中創建一個通過@Input具有輸入屬性的組件時，如何從對該屬性@Input所做的更改中獲得一個可觀察到的信息（不要與用戶表單輸入相混淆）。

export class ExampleComponent implement OnChanges{
    @Input() userObject: User;

    ngOnChanges(changes: any): void{
        // Validate that its the 'userObject' property first
        this.doStuff()
    }
}

在實踐中，我想將userObject的Observable更改與其他事物的Observable更改合並，以形成流暢的更改反應模式。

export class ExampleComponent implement OnChanges{
    @Input() userObject: User;

    constructor():{
        userObject.valueChanges.subscribe(x=>{ this.doStuff() });
    }
}

Answer 1

我發現BehaviorSubject類可以最好地實現此方案。 您可以使用BehaviorSubject的getValue函數在當前值達到峰值，而不是創建單獨的后端字段。 然后，使用后盾BehaviorSubject將其視為可觀察到的更改。

export class ExampleComponent{
    private _userObject: BehaviorSubject<User> = new BehaviorSubject<User>(null);

    @Input()
    set userObject(value: User): { this._userObject.next(value); }
    get userObject(): User { return this._userObject.getValue(); }
}

Answer 2

嘗試使用get和set，下面的valueChanges（）將在設置時觸發。

  private _userObject: User;
  @Input()
  set userObject(userObject: User) {
    this._userObject = userObject;
    this.valueChanges();
  }
  get userObject(): User {
    return this._userObject;
  }

具有可觀察的：

  private userObjectChange = new Subject<User>();
  userObjectChange$ = this.userObjectChange.asObservable();

  private _userObject: User;
  @Input()
  set userObject(userObject: User) {
    this.userObjectChange.next(userObject);
    this._userObject = userObject;
  }
  get userObject(): User {
    return this._userObject;
  }

認購：

this.newQuote.subscribe(user => {...})

Answer 3

您可以為此使用主題：

export class ExampleComponent {
    @Input() set userObject(userObject: User) {
       this.userObject$.next(userObject);
    }

    private userObject$ = new Subject<User>();

    constructor():{
        this.userObject$.subscribe(x=>{ this.doStuff() });
    }
}

Answer 4

檢查輸入更改的最佳方法實際上是使用ngOnChanges生命周期。

ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
  const changedInputs = Object.keys(changes);
  // Only update the userObject if the inputs changed, to avoid unnecessary DOM operations.
  if (changedInputs.indexOf('userObject') != -1) {
  // do something
  }    
}

參考： https : //github.com/angular/material2/blob/master/src/lib/icon/icon.ts#L143