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

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

以下适用于任何 Angular 2+ 应用程序。

假设我们有一个自定义的 CapitalizePipe ，它将每个长度超过 2 个字符的单词大写：

大写.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

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

app.component.ts

// ...
import { CapitalizePipe } from './capitalize.pipe';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ CapitalizePipe ]
})
export class AppComponent {
  constructor(private capitalize: CapitalizePipe) {}

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

onSubmit(value) {
  this.data = this.capitalize.transform(value);
  // ...
}

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