Bir Angular2 Bileşen ve böyle bir giriş nesne var basitleştirilmiş şekilde bileşen girişi

Question

için iç içe mülkiyet değişikliği algılar:

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

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

Prop1 Hostcomponent değiştirildi ve daha sonra DoSomethingIfProp1Change çalıştırma yöntemi olsaydı ben algılayabilir nasıl MyComponent içinden mi?

Answer 1

Abonelerin bildirimini desteklemek için gözlenebilirleri kullanabilirsiniz. Açısal, dahili nesne durumundaki değişiklikleri gözlemlemek için destek sağlamaz.

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); 
    } 
} 

Bu kod

Subject kullanılarak kısaltılabilir ama Observable Subject fazla tercih edilmelidir. Nesne referans içeriğini güncellenen değilken

@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 example

gör

da Delegation: EventEmitter or Observable in Angular2

Answer 2

Aslında, varsayılan olarak Angular2 değişiklikleri algılar. Ancak bu varsayılan davranış DoCheck arabirimi kullanılarak değiştirilebilir. Senin durumunda

(bir özellik myObject nesnesine güncellendi olduğunu tespit, aşağıdaki yaklaşımı kullanabilirsiniz.

prop1 özelliğinin değer güncellenir

@Component({ 
    selector: 'my-component', 
    (...) 
}) 
export class MyComponent implements DoCheck { 
    @Input() myObject: MyObject; 
    differ: any; 

    constructor(differs: KeyValueDiffers) { 
    this.differ = differs.find([]).create(null); 
    } 

    ngDoCheck() { 
    var changes = this.differ.diff(this.myObject); 

    if (changes) { 
     changes.forEachChangedItem((elt) => { 
     if (elt.key === 'prop1') { 
      this.doSomethingIfProp1Change(); 
     } 
     }); 
    } 
    } 

    doSomethingIfProp1Change() { 
    console.log('doSomethingIfProp1Change'); 
    } 
} 

, doSomethingIfProp1Change yöntemi denir

bu plunkr bakınız:. http://plnkr.co/edit/uvOKMXQa9Ik8EiIhb60Y?p=preview

Ben linke sen, benim cevap (bazı hatalar sabit ve çalışan Plunker örneğini eklendi)