@Input с обещанием Angular2

Question

У меня есть родительский компонент, как это:

import { Component } from '@angular/core'; 

import { UrlService } from '../../services/url.service'; 

@Component({ 
    selector: 'wrapPost', 
    templateUrl: './app/html/wrapPost.component.html', 
}) 

export class WrapPost { 
    dataPost: any; 
    url: string; 

    constructor(private urlService: UrlService) {} 

    ngOnInit(){ 
     let url = window.location.pathname; 
     this.urlService.getData(url) 
      .then(res => this.dataPost = res); 
    } 
} 

есть получите даты от сервера и возврата this.dataPost. Это хорошо работает.

Этот HTML-родителя templateUrl: './app/html/wrapPost.component.html'

<div class="noteCommonAlign"> 

    <navigation></navigation> 
    <posts [dataPost]="dataPost"></posts> 
    <loading class="noteCommonAlign"></loading> 
    <pagination [dataPost]="dataPost"></pagination> 

</div> 

Далее компонентной пагинация (ребенок)

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

@Component({ 
    selector: 'pagination', 
    templateUrl: './app/html/pagination.component.html', 
    styleUrls: ['app/css/pagination.component.css'] 
}) 

export class Pagination { 
    pagCurrent: number; 
    @Input() dataPost: any; 

    constructor(){ 
    } 
    ngOnChanges(changes: SimpleChanges){ 
     try{ 
     console.log(this.dataPost); 
    } catch(err) { 
     console.log(err); 
    } 
    } 
} 

Я не могу получить this.dataPost асинхр. Когда я звоню без ngOnChanges console.log (this.dataPost), то произойдет ошибка. Я немного решил эту проблему. I Used ngOnChanges, но в консоли было отправлено 2 сообщений. Одно сообщение с ошибкой другое с отличным результатом.

Как я понимаю, это произошло потому, что ngOnChanges - это цикл Lifecycle и вызывается перед ngOnInit и при изменении одного или нескольких свойств ввода данных. Мне бы не хотелось, чтобы это называлось дважды.

Как получить даты с сервера в дочернем компоненте имеет @Input?

Прошу прощения за грамматику. Буду рад, что все решают.

Answer 1

насчет

<navigation></navigation> 
<posts [dataPost]="dataPost | async"></posts> 
<loading class="noteCommonAlign"></loading> 
<pagination [dataPost]="dataPost | async"></pagination> 

обновление

С помощью этого кода

ngOnInit(){ 
    this.urlService.getData() 
     .then(res => this.dataPost = res); 
} 

Вам не нужно | async потому this.dataPost получает категории, присвоенные, не Promise.

Если вы измените его на

ngOnInit(){ 
    this.dataPost = this.urlService.getData(); 
     //.then(res => this.dataPost = res); 
} 

затем с помощью | async является вывоза мебели, но если вы на самом деле использовать | async

<pagination [dataPost]="dataPost | async"></pagination> 

затем

@Input() dataPost: Promise<any>; 

получает передается категории, а не потому что | async уже решает обещание g и категории.

Plunker example