1. 创建名为'mr.pipe.ts'的自定义管道文件。

2. 在该文件中，导入管道相关的依赖和必要的接口。

3. 创建Pipe装饰器注入到Pipe类中，并指定pipe的名称为'mr'。

4. 实现transform()方法并传入value参数。

5. 在transform()方法中，使用正则表达式将第一个名称替换为'Mr.'。

6. 导出Pipe类。

下面是完整的代码示例：

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

@Pipe({ name: 'mr' }) export class MrPipe implements PipeTransform { transform(value: string): string { const regex = new RegExp(/(\w+)\b/); return value.replace(regex, 'Mr.'); } }

7. 在模板中使用管道：

{{ 'John Smith' | mr }} // 输出：Mr. John Smith

{{ 'Jane Johnson' | mr }} // 输出：Mr. Jane Johnson

这样就能对所有的名字都显示Mr.了。