Как угловой компилятор интерпретирует Pipe, когда мы используем html? - PullRequest
Новая
       16

Как угловой компилятор интерпретирует Pipe, когда мы используем html?

1 голос
/ 07 апреля 2019

Я знаю, как использовать трубу в угловом файле TS или в HTML-файл для фильтрации данных.Но я не понимаю, как угловой компилятор интерпретирует наш канал, когда мы используем его в нашем HTML-файле.Как это прикрепляет объект класса трубы в представлении компонента?

1 Ответ

0 голосов
/ 07 апреля 2019

Для простоты я начну с примера: у нас есть массив строк, и мы хотим применить конвейер для сокращения его предложений или строк 

myArray= ['HereISTheFirstString' , 'HereISTheSecondString' , 'HereISTheThirdString']

Итак, мы собираемся создать новый файл, назовем его shorten.pipe.ts, Внутри файла 

import { PipeTransform } from '@angular/core';
@Pipe({
  name: 'shorten'
})
export class ShortenPipe implements PipeTransform {
   transform(value: any) {
     return value.substr(0 , 12) + '...';
    }
}

Чтобы использовать его, вы должны добавить массив объявлений в app.module.ts, Теперь нам нужно использовать его внутри нашей HTML-страницы 

<div *ngFor="let str of myArray">
   <h3> {{ str | shorten }} </h3>
<div>

Так как на самом деле это работает, Это работает всякий раз, когда компилятор видит shorten, который мы определяем в @Pipe({ name: 'shorten' }) - Вы можете вызвать его как угодно - Он вызовет функцию преобразования и передаст ей строку как значение и вернет результат.

Вы также можете передавать праматоры для преобразования функции, например 

   transform(value: any, limit: number) {
     if(value.length > limit)
        return value.substr(0 , limit) + '...';
      return value;
    }

А для HTML 

<div *ngFor="let str of myArray">
   <h3> {{ str | shorten: 10 }} </h3>
<div>

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

Еще что-то в трубе работает

Цепные трубы

Простой пример, показывающий, как работает последовательность каналов 

<div>
{{ yourDate | date:'fullDate' | uppercase }}
</div>

Он будет идти слева направо и применять разные трубы.

Надеюсь, вы найдете это полезным.

...