@Input mit Versprechen Angular2

Question

Ich habe die übergeordnete Komponente wie folgt aus:

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

gibt es eine stammt aus dem Server erhalten und zurück this.dataPost. Das funktioniert gut.

Diese html von Eltern templateUrl: './app/html/wrapPost.component.html'

<div class="noteCommonAlign"> 

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

</div> 

Weitere Komponente Paginierung (das Kind)

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

kann ich nicht bekommen this.dataPost async. Wenn ich ohne ngOnChanges console.log (this.dataPost) angerufen habe, dann passiere einen Fehler. Ich habe dieses Problem ein wenig gelöst. Ich benutzte ngOnChanges, aber in der Konsole zeigte 2 Nachrichten. Eine Nachricht mit einem anderen Fehler mit einem tollen Ergebnis.

Wie ich verstehe, ist es passiert, weil ngOnChanges Lifecycle ist und vor ngOnInit aufgerufen wird und immer dann, wenn sich eine oder mehrere datengebundene Eingabeeigenschaften ändern. Ich möchte nicht, dass es zweimal aufgerufen wird.

Wie bekomme ich ein Datum vom Server in einer Kindkomponente @Input?

Es tut mir leid für die Grammatik. Ich werde froh sein, dass sich jeder löst.

Answer 1

Was

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

Update

Mit diesem Code

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

Sie brauchen nicht | async weil this.dataPost die Kategorien wird zugewiesen, nicht die Promise.

Wenn Sie es

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

ändern dann | async verwendet, ist approriate, aber wenn Sie tatsächlich | async verwenden

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

dann

@Input() dataPost: Promise<any>; 

die Kategorien übergeben wird, nicht die Versprechen, weil | async bereits das Versprechen zu g löst und die Kategorien.

Plunker example