Question

假设我有一个组件Main和一个子组件Children。 Main组件与路由相关联。它从ActivatedRoute

中检索其输入

export class Main implements OnInit {
  ngOnInit() {
    this.route.data.subscribe(d => {
      this.data1 = this.route.snapshot.data['data1'];
      this.data2 = this.route.snapshot.data['data2'];
      this.doSomething();
    });
  }
}

Children是使用@Input和ngOnInit方法的典型组件：

export class Children implements OnInit {
  @Input("data1")
  public data1;
  @Input("data2")
  public data2;

  ngOnInit() {
      // doSomething with data1 and data2 together
      this.doSomething();    
  }
}

初始化组件时，Children和data1初始化data2的正确方法是什么？路由数据何时更改？

Children可以重复使用，但不能作为路线的一部分。有没有一种方法不涉及到Children代码的路由器抽象泄漏？

Answer 1

如果你不想在你的子组件中使用路由器事件，你可能只需使用一个setter，并将所有数据字段放在一个对象中（这样，如果你更新data1和data2）同时，你只会得到一个更新事件。）

export type DataType = { data1: any, data2: any };

export class Children {

  private _data: DataType;

  @Input()
  public set data(newData: DataType ) {
      this._data = newData;
      this.dataUpdated();
  }

  dataUpdated() {
      //do something with this._data;
  }

}

因此，每当您更改传递给孩子的数据对象时，您的孩子都会更新。

Answer 2

如果您的数据字段绑定到表单，则可以使用onChange事件来调用doSomething()：

<input [(ngModel)]="data1" (change)="doSomething()">...

否则你应该使用NgOnChange钩子：

export class Children implements OnInit, OnChanges {
    ...
    ngOnChanges(changes: SimpleChanges) {
      if(changes['data1']){
        doSomething();
      }
      ...
    }
}

在此处查看组件生命周期的详细信息：

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

当路径参数更改时，将更新的输入传播到子组件的正确方法是什么

2 个答案: