检测为分量输入嵌套属性的变化 [英] detect change of nested property for component input

问题描述

在一个简化的方式，我有一个Angular2组件和一个像这样的输入对象：

In a simplified way I have an Angular2 Component and an input object like this:

class MyObject{
 Prop1:string;
 Prop2:Number;
}  

@Component() 
export class MyComponent{
 @Input() myObject: MyObject;
 DoSomethingIfProp1Change(){
  console.log(myObject.Prop1);
 }
}

我怎样才能检测是否为prop1从Hostcomponent，然后再从里面MyComponent的执行DoSomethingIfProp1Change方法？

How can I detect if Prop1 was changed from Hostcomponent and then execute the DoSomethingIfProp1Change method from inside MyComponent?

推荐答案

您可以用观测来支持用户的通知。角本身并没有观察内部对象状态的变化提供支持。

You can use observables to support notification of subscribers. Angular itself doesn't provide support for observing changes of internal object state.

class MyObject{
  constructor() {
    this.prop1Change$ = new Observable(observer => 
        this._prop1Observer = observer).share(); // share() allows multiple subscribers

    this.prop2Change$ = new Observable(observer =>
        this._prop2Observer = observer).share();
        console.debug(this._prop2Observer);
  }

  prop1Change$: Observable<string>;
  private _prop1Observer: Observer;
  _prop1:string;
  get prop1():string { return this._prop1 };
  set prop1(value:string) {
    this._prop1 = value;
    this._prop1Observer && this._prop1Observer.next(value);
  }

  prop1Change$: Observable<number>;
  private _prop2Observer: Observer;
  _prop2:Number;
  get prop2():number { return this._prop2 };
  set prop2(value:number) {
    this._prop2 = value;
    console.debug(this);
    this._prop2Observer && this._prop2Observer.next(value);
  }
}

这code可以通过使用主题，但观测应在受青睐<$ C $缩短C>主题。

This code could be shortened by using Subject but Observable should be favored over Subject.

@Component() 
export class MyComponent{
  @Input() myObject: MyObject;

  count2:number;

  DoSomethingIfProp1Change(){
    console.log(myObject.prop1);
  }

  ngOnChanges(changes: {[propName: string]: SimpleChange}) {
    console.log('changes');
    if(changes['myObject']) {
      if(this.prop2Subscription) {
        this.prop2Subscription.unsubscribe();
      }
      this.prop2Subscription = this.myObject.prop2Change$.subscribe(value => {
        this.count2 = value;
        console.log('count2: ' + value);
      });
      // same for `prop2`
    }
  }
}

Plunker例如

又见<一个href=\"http://stackoverflow.com/questions/34376854/delegation-eventemitter-or-observable-in-angular2/35568924\">Delegation: EventEmitter或可观察到的Angular2

这篇关于检测为分量输入嵌套属性的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！