面试题：Angular中内置管道与自定义管道的应用场景差异

Question

请阐述在Angular项目中，内置管道（如DatePipe、UpperCasePipe等）和自定义管道各自适合的应用场景，并举例说明。

Answer 1

内置管道适合场景及举例

1. 通用数据格式化场景
   • 适合场景：在项目中，对于常见的数据格式化需求，如日期、数字、文本大小写转换等，使用内置管道可以快速实现，无需额外编写代码。这些管道经过了广泛测试和优化，稳定性高。
   • 举例 - DatePipe：在显示日期时非常有用。假设在组件中有一个日期变量 let myDate = new Date();，在模板中可以这样使用 DatePipe：<p>{{ myDate | date:'yyyy - MM - dd' }}</p>，这会将日期格式化为 年 - 月 - 日 的形式。
   • 举例 - UpperCasePipe：当需要将文本转换为大写形式时，例如有一个字符串变量 let myString = 'hello world';，在模板中可以通过 <p>{{ myString | uppercase }}</p> 将其转换为 HELLO WORLD。

自定义管道适合场景及举例

1. 特定业务逻辑处理场景
   • 适合场景：当内置管道无法满足项目特定的业务逻辑需求时，就需要自定义管道。比如在电商项目中，根据商品价格和折扣计算最终显示价格，或者根据用户权限对某些文本进行特殊处理等。
   • 举例：假设在一个电商项目中，商品有原价 originalPrice 和折扣率 discountRate，需要在模板中显示折扣后的价格。首先创建一个自定义管道 DiscountPipe：

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

@Pipe({
  name: 'discount'
})
export class DiscountPipe implements PipeTransform {
  transform(originalPrice: number, discountRate: number): number {
    return originalPrice * (1 - discountRate);
  }
}

在组件中有变量 let originalPrice = 100; 和 let discountRate = 0.2;，在模板中可以这样使用自定义管道：<p>折扣后价格: {{ originalPrice | discount:discountRate }}</p>，最终会显示折扣后的价格 80。 2. 复用性高的特定转换场景

• 适合场景：如果项目中有多处需要进行相同的特定数据转换操作，自定义管道可以提高代码的复用性。例如在一个国际化项目中，根据不同地区对货币符号和数字格式进行特定组合的显示。
• 举例：假设要根据不同地区显示不同格式的货币。创建一个 CurrencyFormatPipe 自定义管道：

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

@Pipe({
  name: 'currencyFormat'
})
export class CurrencyFormatPipe implements PipeTransform {
  transform(amount: number, region: string): string {
    let currencySymbol;
    if (region === 'US') {
      currencySymbol = '$';
    } else if (region === 'CN') {
      currencySymbol = '¥';
    }
    return `${currencySymbol}${amount.toFixed(2)}`;
  }
}

在组件中有变量 let amount = 123.45; 和 let region = 'US';，在模板中使用 <p>{{ amount | currencyFormat:region }}</p>，会显示 $123.45。