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

@Input with promise Angular2

1 个答案: