Использование пайпов в шаблоне¶

7.04.2022

Для применения пайпа используйте оператор пайпа (|) в выражении шаблона, как показано в следующем примере кода, вместе с именем пайпа, которое является date для встроенного DatePipe.

На вкладках в примере показано следующее:

• app.component.html использует date в отдельном шаблоне для отображения дня рождения.
• hero-birthday1.component.ts использует тот же пайп как часть встроенного шаблона в компоненте, который также устанавливает значение дня рождения.

1

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

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

Значение birthday компонента передается через оператор pipe, | в функцию date.

Комментарии