@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。 效果很好。

父templateUrl: './app/html/wrapPost.component.html'的这个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) 的情况下调用时，会发生错误。我稍微解决了这个问题。我使用了 ngOnChanges 但在控制台中显示了 2 条消息。一条消息有错误，另一条消息效果很好。

我如何理解它已经发生，因为 ngOnChanges 是生命周期，并且在 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 已经解决了获得类别的承诺。

Plunker example