viewchild inputプロパティが必要なときに更新されない2

Question

この動作の何らかの理由を探していて、子コンポーネント 'Param'のInput（）プロパティの値が適切なタイミングで更新されていないため、更新された値を使用して、サービスをパラメータとして呼び出します。 '子値の更新'ボタンをクリックすると、LOG Aが表示された後（最初の値を持つ）最初にLOG Bが表示されます（LOG Aはプロパティの設定者にあります）。

親コンポーネント

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

子コンポーネント

@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... 
    } 
} 

は、所望の動作は、最初の更新されたパラメーターの値を有し、そのサービスに関するパラメータとして、その値を使用することです。 LOG AとLOG B

Answer 1

@Input()を使用すると、値の変更を伝達するためにAngular2メカニズムに依存していることを意味します。つまり、変更がすぐに反映されるとは限りません。実際には、あなたのthis.parentParam = 9;はあなたの子供のparamを更新するためにAngular2サイクル全体を通過し、常にshowParam()機能が最初に実行されます。

1）のように、直接あなたのshowParamにパラメータを追加します：

// 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）を活用ngOnChangesあなたChildコンポーネント上

は、あなたのタスクを達成するために、あなたは2の選択肢があります。この関数は、 @Inputが変更されるたびにAngular2によって呼び出されます。しかし、1つ以上の入力がある場合、これは問題になる可能性があります。

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

Answer 2

私は、これは現在の受け入れ答えより良い答えだと思う：

これを達成するAngular2 +の方法はngOnChangesライフサイクルフックを使用することです：

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