Angular2中组件属性变化的Observable

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

尝试使用 get 和 set，下面的 valueChanges() 将在设置时触发。

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

有一个 Observable：

  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 2

您可以为此使用主题：

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 3

检查输入更改的最佳方法实际上是使用 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

Answer 4

我发现 BehaviorSubject class 最适合这种情况。您可以使用 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(); }
}

Angular2中组件属性变化的Observable

Observable of Component Attribute Changes in Angular2

javascript

rxjs

angular2-directives

angular