Question

我在Angular 2 RC5中实现了一个自定义管道，它处理从服务器获取的数据。我遇到的问题是Pipe在ngOnInit之前执行，这是我调用服务器的地方。

作为测试，我将已经填充的列表传递给Pipe，一切都按预期工作。我唯一的问题是在呈现页面时执行Pipe。因此，该案例中的清单是空的。

有没有办法延迟＆＃34;页面的呈现，以便在管道执行时，它具有从服务器检索的数据吗？

这是我的代码示例：

组件

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

角度2管道在ngOnInit之前执行

1 个答案: