Angular 12使用元件中的管道

<!-- 假设 component.ts 中有一个 public 属性 birthday -->
<p>{{ birthday | date:'fullDate' }}</p>

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  birthday = new Date(1990, 0, 15); // 1990年1月15日
  formattedDate: string;

  constructor(private datePipe: DatePipe) {
    this.formattedDate = this.datePipe.transform(this.birthday, 'fullDate');
  }
}

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

@Pipe({
  name: 'customUpperCase'
})
export class CustomUpperCasePipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

<!-- 假设 component.ts 中有一个 public 属性 message -->
<p>{{ message | customUpperCase }}</p>