8

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

作为测试，我将一个已经填充的列表传递给了 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>
4

1 回答 1

6

当 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;
            }
        }
    }
}
于 2016-09-06T15:52:52.913 回答