Angular 如何自定义 pipe 管道以及参数传递问题

下图第11行代码的 replace，是我自定义的 pipe 在Component 模板文件中的调用之处。标号1和2为其传入的参数，通过冒号进行参数传递。

其中 wordStartPattern 为 replace pipe 的第一个参数，这是一个 Component 属性：

第二个传入 pipe 的参数为 $&，硬编码。

而 pipe 接受的原始值，即 | 之前的值，这个值默认会始终传入 pipe.

完整的实现代码：

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

@Pipe({
  name: 'replace',
})
export class ReplacePipe implements PipeTransform {
  transform(
    value: string,
    searchValue: string | RegExp,
    replaceValue: string,
  ): string {
    const result = value.replace(searchValue, replaceValue);
    console.log(`Jerry own pipe, original value: ${value},
    search value: ${searchValue}, replaceValue: ${replaceValue}, result: ${result}`);
    return result;
  }
}

更多Jerry的原创文章，尽在：“汪子熙”: