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>

现在Component 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不处理.