面试题：Angular中如何实现管道的链式调用

管道链式调用步骤：
- 首先使用自定义管道将不规范的日期字符串数组转换为标准日期对象数组。
- 然后使用Angular内置的DatePipe，根据用户设定的语言区域，将标准日期对象数组格式化为特定格式的字符串数组进行展示。
代码示例：
- 自定义管道（将不规范日期字符串转为日期对象）：

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

@Pipe({
  name: 'parseDateArray'
})
export class ParseDateArrayPipe implements PipeTransform {
  transform(value: string[]): Date[] {
    return value.map(dateStr => {
      // 这里假设不规范日期字符串格式为'YYYY - MM - DD'，实际可能需要更复杂的解析逻辑
      const [year, month, day] = dateStr.split('-');
      return new Date(+year, +month - 1, +day);
    });
  }
}

组件中使用管道：

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app - date - formatting',
  templateUrl: './date - formatting.component.html',
  styleUrls: ['./date - formatting.component.css']
})
export class DateFormattingComponent {
  dateStrings: string[] = ['2023 - 10 - 15', '2023 - 11 - 20'];
  locale = 'en - US';
  dateFormat = 'yyyy/MM/dd';

  constructor(private datePipe: DatePipe) {}

  getFormattedDates() {
    const parsedDates = this.parseDateArrayPipe.transform(this.dateStrings);
    return parsedDates.map(date => this.datePipe.transform(date, this.dateFormat, null, this.locale));
  }
}

模板中展示：

<ul>
  <li *ngFor="let formattedDate of getFormattedDates()">{{formattedDate}}</li>
</ul>

在app.module.ts中要记得导入CommonModule并声明自定义管道ParseDateArrayPipe：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';
import { ParseDateArrayPipe } from './parse - date - array.pipe';

@NgModule({
  declarations: [
    AppComponent,
    ParseDateArrayPipe
  ],
  imports: [
    BrowserModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

星途面试题库

面试题：Angular中如何实现管道的链式调用

知识考点

面试题答案