在 ngOnInit 之前执行的 Angular 2 管道

Question

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

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

有什么方法可以“延迟”页面的呈现，以便在 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;
            }
        }
    }
}