Angular2 输入与异步数据

有时你需要异步获取数据，然后再将其传递给要使用的子组件。如果子组件在收到数据之前尝试使用该数据，则会引发错误。你可以使用 ngOnChanges 来检测组件’@Inputs 中的更改，并等到它们被定义后再对其进行操作。

父组件，对端点进行异步调用

import { Component, OnChanges, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ChildComponent } from './child.component';

@Component ({
    selector : 'parent-component',
    template : `
        <child-component [data]="asyncData"></child-component>
    `
})
export class ParentComponent {
    
    asyncData : any;

    constructor(
        private _http : Http
    ){}

    ngOnInit () {
        this._http.get('some.url')
            .map(this.extractData)
            .subscribe(this.handleData)
            .catch(this.handleError);
    }

    extractData (res:Response) {
        let body = res.json();
        return body.data || { };
    }

    handleData (data:any) {
        this.asyncData = data;
    }

    handleError (error:any) {
        console.error(error);
    }
}

具有异步数据作为输入的子组件

此子组件将异步数据作为输入。因此，在使用之前必须等待数据存在。我们使用 ngOnChanges，它会在组件输入发生变化时触发，检查数据是否存在，如果存在则使用它。请注意，如果依赖于传入的数据的属性不为 true，则子项的模板将不会显示。

import { Component, OnChanges, Input } from '@angular/core';

@Component ({
    selector : 'child-component',
    template : `
        <p *ngIf="doesDataExist">Hello child</p>
    `
})
export class ChildComponent {
    
    doesDataExist: boolean = false;

    @Input('data') data : any;

    // Runs whenever component @Inputs change
    ngOnChanges () {
        // Check if the data exists before using it
        if (this.data) {
            this.useData(data);
        {
    }

    // contrived example to assign data to reliesOnData    
    useData (data) {
        this.doesDataExist = true; 
    }
}