Angular 2 Pipes ausführen vor ngOnInit

Question

Ich habe eine benutzerdefinierte Pipe in Angular 2 RC5 implementiert, die Daten verarbeitet, die ich vom Server bekomme. Das Problem, das ich habe, ist, dass die Pipe vor dem ngOnInit ausführt, wo ich die Anrufe zum Server mache.

Als Test übergab ich eine bereits gefüllte Liste an die Pipe und alles funktioniert wie erwartet. Das einzige Problem, das ich habe, ist, dass die Pipe ausgeführt wird, wenn die Seite gerendert wird. Und so ist die Liste in diesem Fall leer.

Gibt es eine Möglichkeit, das Rendern der Seite zu "verzögern", so dass beim Ausführen der Pipe die Daten vom Server abgerufen werden?

Dies ist ein Beispiel von meinem Code:

Komponente

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)); 
} 

Rohr

@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; 
      } 
     } 
    } 
} 

Vorlage

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

Answer 1

Wenn die Winkelerkennung die Erkennung ändert, wird die Pipe das erste Mal ausgeführt. Nach dem ersten Änderungserkennungslauf wird ngOnInit() aufgerufen. Verzögern des Anrufs zu Ihrer Rohrleitung bis ngOnInit() würde überhaupt nicht helfen, denn wenn Sie den Server Anruf in ngOnInit() machen bedeutet nicht, dass Sie sofort die Antwort erhalten. Die HTTP-Anfrage ist ein Async-Anruf und die Antwort kommt irgendwann, aber ngOnInit() wird schon lange fertig sein.

Ich denke, in Ihrem Fall sollte es genug sein, um nur das Rohr sicher für null Werte zu machen, so dass es Ausnahmen nicht dazu führt, wenn die übergebenen Werte sind null:

@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; 
      } 
     } 
    } 
}