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

Question

让我们说我创建了一个自定义的彩虹化管道，它将每个字母包裹在一个带有随机颜色的彩虹作为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，示例有效。