angular - @Input promise 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>

进一步组件分页( child )

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 之前以及每当一个或多个数据绑定(bind)输入属性发生变化时被调用。我不喜欢它被调用两次。

如何在具有@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 是合适的，但如果你真的使用 |异步

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

然后

@Input() dataPost: Promise<any>;

通过了类别，而不是 promise ，因为 | async 已经解决了获取类别的 promise 。

Plunker example