Angular2 Async Data Issue

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> 

в противном случае это простая строка приписывать назначение Угловые не обрабатывает.

Answer 2

Это обычный прецедент для встроенной трубы async, предназначенной для беспрепятственного использования наблюдаемых.

Попробуйте следующее, сначала создать поглотитель, чем возвращается непосредственно уровень службы наблюдаемого:

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

Тогда вы можете потреблять это наблюдаемое непосредственно в шаблоне с помощью async трубы:

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