typescript - 如何使自定义管道可用于 Angular 2 中的所有组件？

Question

假设我创建了一个自定义 rainbowize 管道，它将每个字母包装在一个范围内，彩虹的随机颜色作为 css color prop。我希望能够在我的应用程序的所有组件中使用此自定义管道。目前，我正在像这样将管道导入每个组件

import { Component } from 'angular2/core';

import { RainbowizePipe } from '../pipes/rainbowize';

@Component({
    'pipes': [RainbowizePipe]
})

并在这样的模板中使用它

<p>{{text | rainbowize}}</p>

太棒了，我有彩虹色的文字。但是，如果只需要将 Rainbowize 管道导入应用程序一次，然后就可以在全局范围内使用，那就太好了。

是否有推荐的 Angular 2/Typescript 方法来使自定义管道全局可用？

Answer 1

您可以将自定义管道提供给 PLATFORM_PIPES所以可用于您的整个应用程序。

bootstrap(App, [provide(PLATFORM_PIPES, {useValue: RainbowizePipe, multi:true})]);

这样您就不必在组件的 pipes 属性中显式添加它们。

这是一个 plnkr有一个工作的例子。