Вам не всегда нужно использовать угловую трубу в шаблоне
В этом посте я покажу вам, как можно использовать каналы 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, но те же принципы применимы к любым другим встроенным или настраиваемым каналам.