角度2管道在ngOnInit之前执行

Question

我在Angular 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()已经很长时间完成了.

我认为在你的情况下,只需要使管道对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;
            }
        }
    }
}