Angular 4 Pipes中的異步調用

我有一個服務從服務器獲取時間的方法，我打算在自定義管道中使用它。管道的目的是將時間戳與當前時間進行比較，並以可讀的格式返回。Angular 4 Pipes中的異步調用

服務

export class TimeService{ 
    currentServerTime; 

    fetchCurrentTimeStamp(){ 
    //http request using Observable 
    return sendGETRequest(.....).map(data => { 
     this.currentServerTime = data; 

     return this.currentServerTime; 
    }) 
    } 
}

管

export class GetTimeFromNowPipe implements PipeTransform{ 

    fromNow; 
    currentServerTime: number; 
    constructor(private timeService: TimeService, private appSettings: AppSettings){} 

    transform(value: number){ 
     var currentTime; 
     this.timeService.fetchCurrentTimestamp().subscribe(data => { 
      currentTime = data 
      if(!value) return ""; 

      if(value){ 
       let newDate = moment.unix(value); 
       this.fromNow = newDate.from(moment.unix(currentTime), true); 
      } 
      return this.fromNow; 
     }); 

    } 
}

HTML

<ul> 
    <li *ngFor = "let model of models"> 
     <span>{{model.created | getTimeFromNow}}</span> 
    </li> 
</ul>

我卡與異步調用。只有在我從服務器獲取數據後，如何從管道中返回值？

來源

2017-08-28 adityav

一個return缺失和subscribe需要改變map允許異步管辦訂閱

return this.timeService.fetchCurrentTimestamp().map(data => {

和異步數值異步管道需要使用

<span>{{model.created | getTimeFromNow | async }}</span>

來源

2017-08-28 12:34:29

的實現它的最好方法是不使用管道內的服務。您可以使用自定義管道僅實現管道需要執行的操作。你管需要被這樣定義：

export class GetTimeFromNowPipe implements PipeTransform{ 

    constructor(private appSettings: AppSettings){} 

    transform(value: number, currentTime:number){ 
      if(!value) return ""; 
      else{ 
       let newDate = moment.unix(value); 
       return newDate.from(moment.unix(currentTime), true); 
      } 
    } 
}

你的組件裏，你可以打電話給你的服務，它存儲varible裏面你的OnInit生命週期（當然你需要注入組件內的服務）。

serverTime:number; 
ngOnInit(){ 
    this.timeService.fetchCurrentTimestamp().subscribe(data=>this.serverTime=data); 
    }

然後在你的組件的模板裏面你可以使用你的管道。有兩種

<ul *ngIf="serverTime"> 
    <li *ngFor = "let model of models"> 
     <span>{{model.created | getTimeFromNow:serverTime}}</span> 
    </li> 
</ul>

或者

<ul> 
    <li *ngFor = "let model of models"> 
     <span>{{model.created | getTimeFromNow: serverTime | async}}</span> 
    </li> 
</ul>

澄清&用途：

這個實現的目的是爲了方便：

-Testing你管

- 在服務器出現問題的情況下易於調試

- 服務器的一個獨立實現，可用於具有不同參數（可重用性）的其他組件。

來源

2017-08-28 13:32:05

Angular 4 Pipes中的異步調用

回答

相關問題