如何在Angular 2中为所有组件提供自定义管道？

Question

假设我创建了一个自定义的rainbowize管道，它将每个字母都以一个随机颜色的彩虹作为css颜色道具包裹起来。我希望能够在我的应用程序的所有组件中使用此自定义管道。目前，我进口管到每个组件这样

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与一个例子工作。