ngOnInit 전에 실행되는 각도 2 파이프

Question

서버에서 가져온 데이터를 처리하는 각도 2 RC5의 사용자 지정 파이프가 구현되었습니다. 내가 가지고있는 문제는 파이프가 서버에 호출하는 곳인 ngOnInit 전에 실행된다는 것입니다.

테스트에서 이미 채워진 목록을 파이프에 전달했으며 모든 것이 예상대로 작동합니다. 유일한 문제는 페이지가 렌더링 될 때 파이프가 실행된다는 것입니다. 그리고 그 경우 목록은 비어 있습니다.

페이지 렌더링을 지연시켜 파이프가 실행될 때 서버에서 데이터를 가져올 수있는 방법이 있습니까?

이

내 코드의 샘플입니다

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 run이 감지를 변경하면 the pipe가 처음 실행됩니다. 첫 번째 변경 감지 실행 후 ngOnInit()이 호출됩니다. ngOnInit()까지 서버 호출을 지연하면 전혀 도움이되지 않습니다. 왜냐하면 서버 호출을 ngOnInit()으로 호출한다고해서 즉시 응답을 얻지 못하기 때문입니다. HTTP 요청은 비동기 호출이며 응답은 결국 발생하지만 ngOnInit()은 이미 오랜 시간 완료됩니다.

나는 당신의 경우에 생각이 전달 된 값이 null 경우는 예외가 발생하지 않도록 단지 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; 
      } 
     } 
    } 
}