Angular 2 个管道在 ngOnInit 之前执行

Question

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

作为测试，我将一个已经填充的列表传递给管道，一切都按预期进行。我遇到的唯一问题是 Pipe 在呈现页面时执行。所以这种情况下的列表是空的。

有什么方法可以 "delay" 呈现页面，以便在 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 运行s 更改检测时，则第一次执行管道。在第一个变化检测运行之后，调用 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;
            }
        }
    }
}

Angular 2 个管道在 ngOnInit 之前执行

Angular 2 Pipes executing before ngOnInit

angular-pipe

angular-rc5

angular