viewchild girdi özelliği gerektiğinde güncelleştirilemedi açısal 2

Question

Bu davranışın bir nedenini aradığım için, bir 'Param' alt bileşeninde bir Input() özelliğinin değeri doğru zamanda güncelleştirilmiyor, gerekiyor Bir hizmeti parametre olarak çağırmak için güncellenmiş değeri kullanın. 'Çocuk değerini güncelle' butonuna basıldığında, LOG A (önce A değeri görüntülenir) (A LOG değeri görüntülenir) daha sonra (eski bir değer ile) görüntülenir.

Veli bileşeni

@Component({ 
    selector: 'parent', 
    template: ` 
    <child #child [param]="parentParam"></child> 
    <button (click)="updateChildValue()">Update child value</button> 
`}) 
export class Parent { 
    @ViewChild('child') child: Child; 
    public parentParam: number; 

    public updateChildValue() { 
    this.parentParam = 9; 
    this.child.showParam(); 
    } 
} 

çocuk bileşeni

@Component({ 
    selector: 'child', 
    template: '' }) 

export class Child { 

    private _param: number; 

    public get param() : number { 
     return this._param; 
    } 

    @Input('param') 
    public set param(v : number) { 
     this._param = v; 
     console.log('LOG A'); 
     console.log(this.param);   
    } 

    public showParam() { 
     console.log('LOG B'); 
     console.log(this.param); 
     //I need to call a service using the latest value of param here... 
    } 
} 

istenen davranış ilk güncellenmiş param değerine sahip ve daha sonra bir hizmeti parametre olarak bu değeri kullanmaktır. LOG A sonra LOG B

Answer 1

@Input() kullanmak, değer değişikliklerini yaymak için Angular2 mekanizmasına güvenmekte olduğunuz anlamına gelir; bu, değişikliklerin anında etkili olmasını beklememeniz gerektiği anlamına gelir. Aslında, this.parentParam = 9;, çocuğunuzun param ve showParam() işlevini güncellemek için bir Angular2 döngüsünden geçecektir ve her zaman ilk önce yürütülür.

1) deki gibi, doğrudan showParam parametreyi ekleyin:

// child component 
public showParam(newVal: number) { 
    this._param = newVal; 
    // do your service call here 
} 

// parent component 
public updateChildValue() 
{ 
    this.parentParam = 9; 
    this.child.showParam(9); 
} 

2) Kaldıraç ngOnChanges sizin Child bileşende

görevi başarmak için, 2 seçenek var. Bu işlev, herhangi bir @Input için bir değişiklik olduğunda Angular2 tarafından çağrılır. Ancak, 1'den fazla girdiniz varsa, bu sorunlu olabilir.

ngOnChanges(changes) { 
    console.log(this.param); // new value updated 
} 

Answer 2

bu akım kabul edilen yanıt daha iyi bir cevap olduğunu düşünüyorum:

Bunu gerçekleştirmenin Angular2 + yolu ngOnChanges yaşam döngüsü kanca kullanmaktır:

Parent component: 


@Component({ 
    selector: 'parent', 
    template: ` 
    <child #child [param]="parentParam"></child> 
    <button (click)="updateChildValue()">Update child value</button> 
`}) 
export class Parent { 
    @ViewChild('child') child: Child; 
    public parentParam: number; 

    public updateChildValue() { 
    this.parentParam = 9; 
    this.child.showParam(); 
    } 
} 

the child component: 

import { OnChanges, SimpleChanges, SimpleChange } from '@angular/core' 

@Component({ 
    selector: 'child', 
    template: '' }) 

export class Child implements OnChanges { 

    @Input() param: number; 



    public showParam() { 
     console.log('LOG B'); 
     console.log(this.param); 
     //I need to call a service using the latest value of param here... 
    } 

    ngOnChanges(changes: SimpleChanges) { 
    const c: SimpleChange = changes.param; 
    this.param = c; 
    } 
}