在模板中使用管道

要应用管道，请在模板表达式中使用管道运算符(|)，如以下代码示例所示，以及管道名称，对于内置DatePipe来说是 date。

示例中的选项卡显示以下内容：

• app.component.html在另一个单独的模板中使用 date来显示生日。

• hero-birthday1.component.ts使用相同的管道作为组件内嵌模板的一部分，同时该组件也会设置生日值。

src/app/app.component.html

<p>The hero's birthday is {{ birthday | date }}</p>

src/app/hero-birthday1.component.ts

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

@Component({
  selector: 'app-hero-birthday',
  template: "<p>The hero's birthday is {{ birthday | date }}</p>"
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based
}

该组件的 birthday值通过管道操作符（|）流向 date 函数。