Вам не всегда нужно использовать угловую трубу в шаблоне

В этом посте я покажу вам, как можно использовать каналы Angular в коде компонента. Часто мы используем каналы в шаблоне, однако каналы - это просто классы с некоторой логикой, поэтому их также можно использовать в коде машинописного текста.

Чтобы проиллюстрировать использование каналов Angular в компоненте, я буду использовать TitleCasePipe. Но принципы, которые я изложил, должны применяться и работать с любыми другими трубами.

TitleCasePipe в основном преобразует строку, делая все первые буквы слов в строке заглавными, а остальные - строчными. Например, если применить вертикальную черту к слову joe biden, вы получите результат Joe Biden.

Создайте приложение Angular

Для практичности мы можем создать приложение Angular, чтобы увидеть преобразование конвейера в действии.

Создайте простое приложение Angular через интерфейс командной строки Angular, выполнив следующую команду.

ng new pipe-in-component --defaults

Использование трубы в компоненте

Теперь, когда у нас есть базовое приложение Angular. Мы можем использовать преобразование трубы в компоненте в следующих трех основных шагах.

1. Зарегистрируйте трубу в модуле

Сначала зарегистрируйте канал, который вы хотите использовать в качестве поставщика в основном файле модуля, в этом случае это будет файл app.module.ts, как выделено жирным шрифтом ниже. . Также не забудьте импортировать трубу из источника.

Примечание. Встроенный канал Angular можно импортировать из библиотеки @ angular / common.

import { TitleCasePipe } from '@angular/common';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule ],
providers: [TitleCasePipe],
bootstrap: [AppComponent]
})
export class AppModule { }

2. Вставьте трубу в компонент.

Следующим шагом является внедрение канала в компонент, в котором мы хотим, чтобы он использовался. Мы выполняем внедрение зависимостей в конструкторе компонентов. Не забываем импортировать трубу из источника.

3. Вызовите метод преобразования каналов.

Наконец, вы можете вызвать метод преобразования инжектированных труб, передав необходимые параметры, которые вы хотите преобразовать. В этом примере мы вызовем его в методе ngOnInit и передадим ему строку для преобразования.

Весь код файла app.component.ts будет выглядеть, как показано ниже. Жирным шрифтом выделены внесенные мной изменения.

app.component.ts

import { Component, OnInit} from '@angular/core';
import { TitleCasePipe } from '@angular/common';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    title = 'pipe-in-component';
    fullname  = ''
constructor(private titleCasePipe: TitleCasePipe) {
}
ngOnInit(): void {
   this.fullname = this.titleCasePipe.transform('keVin carTor')
}
}

Удалите весь код в файле шаблона app.component.html и вставьте приведенный ниже код, чтобы отобразить отформатированную строку в шаблоне.

app.component.html

<h5>Fullname</h5>
{{fullname}}

Наконец, вы можете обслуживать приложение с помощью следующей команды, и у вас должен быть результат, аналогичный приведенному ниже.

ng serve -o

Заключение

В этом руководстве я показал, как можно использовать канал Angular в компоненте. Мы использовали TitleCasePipe, но те же принципы применимы к любым другим встроенным или настраиваемым каналам.