在 Angular 中的组件类中使用自定义管道

很容易创建自定义管道，用于模板中修改插值。如果您还想在组件类中使用管道的功能，则不必复制代码。你所要做的就是像服务一样注入管道，然后调用它的transform方法。

<$>[note]以下内容适用于任何Angular 2+应用程序。<$>

假设我们有一个定制的CapitalizeTube，它将超过2个字符的每个单词大写：

1[label capitalize.pipe.ts]
2import { Pipe, PipeTransform } from '@angular/core';

现在，假设您的管道已正确添加到模块的声明中，您可以将其注入组件的类中，如下所示：

 1[label app.component.ts]
 2// ...
 3import { CapitalizePipe } from './capitalize.pipe';
 4
 5@Component({
 6  selector: 'app-root',
 7  templateUrl: './app.component.html',
 8  styleUrls: ['./app.component.css'],
 9  providers: [ CapitalizePipe ]
10})
11export class AppComponent {
12  constructor(private capitalize: CapitalizePipe) {}

要使用它，只需在注入的实例上调用Transformm：

1onSubmit(value) {
2  this.data = this.capitalize.transform(value);
3  // ...
4}

👍就这么简单！现在，您可以在自定义管道中定义逻辑，这些逻辑可以直接在组件类中重复使用，而无需复制代码。