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