面试题：Angular 中自定义管道的基础实现

Question

请简述在 Angular 中创建一个简单自定义管道的步骤，并给出一个示例，该管道用于将字符串转换为首字母大写的形式。

Answer 1

1. 创建管道类：
   • 使用 ng generate pipe 命令生成管道类的基本结构，例如在终端输入 ng generate pipe capitalize。这会在项目中生成一个 capitalize.pipe.ts 文件。
   • 打开生成的文件，管道类需要继承 PipeTransform 接口，实现 transform 方法。

   import { Pipe, PipeTransform } from '@angular/core';
   
   @Pipe({
     name: 'capitalize'
   })
   export class CapitalizePipe implements PipeTransform {
     transform(value: string): string {
       if (!value) return '';
       return value.charAt(0).toUpperCase() + value.slice(1);
     }
   }
   

2. 在模块中声明管道：
   • 打开相关的 Angular 模块文件（通常是 app.module.ts），在 declarations 数组中添加刚刚创建的管道类。

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform - browser';
   import { AppComponent } from './app.component';
   import { CapitalizePipe } from './capitalize.pipe';
   
   @NgModule({
     declarations: [
       AppComponent,
       CapitalizePipe
     ],
     imports: [
       BrowserModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

3. 使用管道：
   • 在组件的模板中使用管道。例如，在 app.component.html 中：

   <p>{{ 'hello world' | capitalize }}</p>
   

上述代码中，管道将 'hello world' 字符串转换为首字母大写的形式，即 'Hello world'。