ngOnInitの前に実行されている角2パイプ

Question

私はサーバーから取得したデータを処理する角パイプ2 RC5のカスタムパイプを実装しました。私が抱えている問題は、サーバが呼び出されたところのngOnInitの前にパイプが実行されることです。

テストでは、すでにパイプが挿入されているリストをパイプに渡し、すべてが期待通りに機能します。唯一の問題は、ページがレンダリングされたときにPipeが実行されることです。そしてその場合のリストは空です。

ページのレンダリングを遅延させて、パイプが実行されたときにサーバーからデータが取得されるようにする方法はありますか？

これは私のコードのサンプルです：

コンポーネント

ngOnInit() { 
    Observable.forkJoin([ 
     this.testService.get(), 
     this.multilingualService.get(localStorage.getItem('currentPage')) 
    ]).subscribe(servicesResult => { 
     this.mainList = servicesResult[0]; 
     this.pageMultilinguals = servicesResult[1]; 
    }, 
    error => this.handleError(error)); 
} 

パイプ

@Pipe({name: 'multiLang'}) 
export class MultilingualPipe implements PipeTransform { 
    transform(value: string, pageMultilinguals: Multilingual[], context: number): string { 

     for (let i = 0; i < pageMultilinguals.length; i++) { 
      if (pageMultilinguals[i].reference === value && pageMultilinguals[i].contexTypeId === context) { 
       return pageMultilinguals[i].value; 
      } 
     } 
    } 
} 

テンプレート

<span>{{ 'Test' | multiLang: pageMultilinguals: 9 }}</span> 

Answer 1

Angularランが検出を変更すると、パイプが最初に実行されます。最初の変更検出実行後、ngOnInit()が呼び出されます。 ngOnInit()までの呼び出しをパイプに遅らせることは、まったく役に立ちません。なぜなら、サーバーコールをngOnInit()にすると、すぐに応答が得られるわけではないからです。 HTTP要求は非同期呼び出しであり、応答は最終的に来ますが、ngOnInit()はすでに長い時間が完了しています。あなたは空のデータのチェックを追加することはでき

@Pipe({name: 'multiLang'}) 
export class MultilingualPipe implements PipeTransform { 
    transform(value: string, pageMultilinguals: Multilingual[], context: number): string { 
     if(!value || !pageMultilinguals || !context) { 
      return null; 
     } 
     for (let i = 0; i < pageMultilinguals.length; i++) { 
      if (pageMultilinguals[i].reference === value && pageMultilinguals[i].contexTypeId === context) { 
       return pageMultilinguals[i].value; 
      } 
     } 
    } 
}