Question

我有一个从数据库加载数据的父组件。这些数据来自我的服务，它返回一个承诺。

组件：

ngOnInit() {
    this._massEmpService.fetchFilterFields()
        .then(results => {
            this.fields = {
                areas: results['areas']['options'],
                silos: results['silos']['options'],
                departments: results['departments']['options'],
                locations: results['locations']['options'],
                segments: results['segments']['options'],
                roles: results['roles']['options']
            };
        });
}

服务

fetchFilterFields() {
    return new Promise((resolve, reject) => {
        this._http.get(this.baseUrl + '/fetchImportFields', { "headers": this.headers })
            .map((result: Response) => result.json())
            .subscribe((results) => resolve(results.data));
    });
};

我正在尝试将this.fields数据传递给子组件，但是当我尝试使用子组件中的数据时，它似乎无法访问它。

子组件：

@Input() fields: any;

ngAfterViewInit() {
    console.log(this.fields); // No data
}

父HTML：

<app-import [fields]="fields"></app-import>

我认为这是一个异步问题，但我认为使用afterViewInit可能已经解决了它。有什么想法吗？

Answer 1

我的建议是使用Subject和Observable的共享服务，以便子组件变量可以subscribe到数据流。

使用数据绑定方式，子组件加载了父组件，因此当Promise返回数据时，子组件不知道它，因此需要重新初始化以获取数据。 Observable和subscription会消除此问题。

我创建了这个Plunker demo，它将promise数据返回给子组件（增加了额外的2000ms延迟）。如果它适合您，您可以在代码中轻松实现它:)

parent.component.ts：

constructor(private appState: AppState){ }

  ngOnInit(){
    this.getData();
  }

  getData(): void {
    this.appState
        .fetchFilterFields()
        .then(data => {
          // console.log(data)
          this.appState.setData(data);
        });
}

service.ts：

  private headers = new Headers({'Content-Type': 'application/json'});
  private apiUrl = 'api/data';

  // Observable string source
  private dataStringSource = new Subject<string>();

  // Observable string stream
  dataString$ = this.dataStringSource.asObservable();

  constructor(private http: Http) { }

  public setData(value) {
    this.dataStringSource.next(value);
  }

  fetchFilterFields() {
    console.log(this.apiUrl);
    return this.http.get(this.apiUrl)
               .delay(2000)
               .toPromise()
               .then(response => response.json().data)
               .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }

child.component.ts：

fields: any;

constructor(private appState: AppState){
    // this.mylist = this.appState.get('mylist');

    this.appState.dataString$.subscribe(
      data => {
        // console.log("Subs to child" + data);
        this.fields = data; 
      });

}

Answer 2

使用ngOnChanges()，每当输入属性的值发生变化时调用。{/ p>

与子组件的Angular2异步问题

2 个答案: