Angular2異步數據問題

Question

我有一個依賴於異步獲取對象的組件。 模板中還有一些子組件依賴於同一對象中的某些數據。

我遇到的問題似乎是一個典型的競爭條件，但我對Angular 2不太熟悉，無法理解解決方案。

以此為例：

export class SampleComponent {
    constructor(service: SomeService) {
        this.service = service;
        this._loadData();
    }

    private _loadData() {
        this.service.getData().subscribe(data => this.data = data);
    }
}

但是在模板中，我有子組件來顯示this.data某些部分：

<taglist tags="data?.tags"></taglist>

現在taglist的組件看起來像：

@Component({
    selector: 'taglist',
    directives: [NgFor],
    inputs: ['tags'],
    template: `<span *ngFor="#tag of tags">{{ tag }}</span>`
})

export class TagList {
    public tags: Array<string> = [];

    constructor() {
        //
    }
}

由於標記輸入是從異步加載的數據集接收的，因此在標記組件初始化時不存在。 我該怎么辦，當這個this.data加載完成后，使用它的子組件會自動訪問新加載的數據？

感謝您提供給我的任何見解！

Answer 1

實現ngOnChanges() （ https://angular.io/docs/ts/latest/api/core/OnChanges-interface.html ）

@Component({
    selector: 'taglist',
    inputs: ['tags'],
    template: `<span *ngFor="let tag of tags">{{ tag }}</span>`
})

export class TagList {
    public tags: Array<string> = [];

    constructor() {
        //
    }

    ngOnChanges(changes: {[propName: string]: SimpleChange}) {
      console.log('ngOnChanges - tags = ' + changes['tags'].currentValue);
    }
}

對於角度處理綁定也使用

<taglist [tags]="data?.tags"></taglist> or <taglist tags="{{data?.tags}}"></taglist>

否則它是一個簡單的字符串屬性賦值Angular不處理。

Answer 2

這是內置async管道的常用用例，用於輕松使用observable。

嘗試以下方法，首先創建一個getter而不是直接返回服務層observable：

get data(): Observable {
    return this.service.getData();
}

然后，您可以使用async管道直接在模板中使用此observable：

<span *ngFor="let tag of data | async">{{ tag }}</span>