9

この動作の何らかの理由を探していました。子コンポーネント 'Param' の Input() プロパティの値が適切なタイミングで更新されていません。更新された値を使用して、サービスをパラメーターとして呼び出す必要があります。「子の値を更新」ボタンをクリックすると、LOG B が最初に (古い値で) 表示され、その後に LOG A が表示されます (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...
   }
}

望ましい動作は、最初に param の値を更新してから、その値をサービスのパラメーターとして使用することです。ログ A の次にログ B

4

3 に答える 3

12

Using@Input()は、Angular2 メカニズムに依存して値の変更を伝播することを意味します。つまり、変更がすぐに有効になることを期待しないでください。実際、this.parentParam = 9;Angular2 サイクル全体を実行して子を更新paramし、showParam()関数が常に最初に実行されます。

タスクを達成するには、次の 2 つの選択肢があります。

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。この関数は、 any が変更されるたびに Angular2 によって呼び出されます@Input。ただし、複数の入力がある場合、これは問題になる可能性があります。

ngOnChanges(changes) {
  console.log(this.param); // new value updated
}
于 2016-10-26T23:43:36.490 に答える
4

これは、現在受け入れられている回答よりも優れた回答だと思います。

これを実現する Angular2+ の方法は、ngOnChanges ライフサイクル フックを使用することです。

親コンポーネント:

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

子コンポーネント:

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;
   }
}
于 2017-07-13T12:24:40.450 に答える