Angular7 - Трубы

В этой главе мы обсудим каналы в Angular 7. Каналы ранее назывались фильтрами в Angular1, а в Angular2 - каналами.

| символ используется для преобразования данных. Ниже приведен синтаксис для того же -

{{ Welcome to Angular 7 | lowercase}}

Он принимает целые числа, строки, массивы и дату в качестве входных данных, разделенных | чтобы преобразовать в нужный формат и отобразить его в браузере.

Рассмотрим несколько примеров использования труб. Здесь мы хотим вывести текст в верхнем регистре. Это можно сделать с помощью труб следующим образом -

В файле app.component.ts мы определили переменную заголовка следующим образом:

app.component.ts

import { Component } from '@angular/core';
@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent {
   title = 'Angular 7 Project!'; 
}

Следующая строка кода входит в app.component.html файл -

<b>{{title | uppercase}}</b><br/> 
<b>{{title | lowercase}}</b>

Браузер выглядит, как показано на следующем снимке экрана -

Вот некоторые встроенные трубы, доступные с угловым -

• Lowercasepipe
• Uppercasepipe
• Datepipe
• Currencypipe
• Jsonpipe
• Percentpipe
• Decimalpipe
• Slicepipe

Мы уже видели строчные и прописные буквы. Давайте теперь посмотрим, как работают другие трубы. Следующая строка кода поможет нам определить необходимые переменные вapp.component.ts файл -

import { Component } from '@angular/core';
@Component({ 
   selector: 'app-root',
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent {
   title = 'Angular 7 Project!'; 
   todaydate = new Date(); 
   jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}}; 
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun", "July", "Aug", 
      "Sept", "Oct", "Nov", "Dec"]; 
}

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

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "width:100%;"> 
   <div style = "width:40%;float:left;border:solid 1px black;"> 
      <h1>Uppercase Pipe</h1> 
      <b>{{title | uppercase}}</b>
      <br/> 
      
      <h1>Lowercase Pipe</h1> 
      <b>{{title | lowercase}}</b> 
      <h1>Currency Pipe</h1> 
      <b>{{6589.23 | currency:"USD"}}</b>
      <br/> 
      
      <b>{{6589.23 | currency:"USD":true}}</b> 
      // Boolean true is used to get the sign of the currency. 
      <h1>Date pipe</h1> 
      <b>{{todaydate | date:'d/M/y'}}</b>
      <br/> 
      
      <b>{{todaydate | date:'shortTime'}}</b> 
      <h1>Decimal Pipe</h1> 
      <b>{{ 454.78787814 | number: '3.4-4' }}</b> 
      // 3 is for main integer, 4 -4 are for integers to be displayed. 
   </div> 
   
   <div style = "width:40%;float:left;border:solid 1px black;"< 
      <h1<Json Pipe</h1> 
      <b>{{ jsonval | json }}</b>
      <h1>Percent Pipe</h1> 
      <b>{{00.54565 | percent}}</b> 
      <h1>Slice Pipe</h1> 
      <b>{{months | slice:2:6}}</b> 
      // here 2 and 6 refers to the start and the end index 
   </div> 
</div>

На следующих снимках экрана показан результат для каждой трубы -

Как создать собственную трубу?

Чтобы создать собственный канал, мы создали новый файл ts. Здесь мы хотим создать настраиваемый канал sqrt. Мы дали файлу то же имя, и он выглядит следующим образом:

app.sqrt.ts

import {Pipe, PipeTransform} from '@angular/core'; 
@Pipe ({ 
   name : 'sqrt'
}) 
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}

Чтобы создать собственный канал, мы должны импортировать Pipe и Pipe Transform из Angular / core. В директиве @Pipe мы должны дать нашему каналу имя, которое будет использоваться в нашем файле .html. Поскольку мы создаем канал sqrt, мы назовем его sqrt.

В дальнейшем нам нужно создать класс с именем SqrtPipe. Этот класс будет реализовывать PipeTransform.

Метод преобразования, определенный в классе, примет аргумент как число и вернет число после извлечения квадратного корня.

Поскольку мы создали новый файл, нам нужно добавить его в app.module.ts. Это делается следующим образом -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Мы создали app.sqrt.tsкласс. Мы должны импортировать то же самое вapp.module.tsи укажите путь к файлу. Он также должен быть включен в объявления, как показано выше.

Давайте теперь посмотрим на вызов канала sqrt в app.component.html файл.

<h1>Custom Pipe</h1> 
<b>Square root of 25 is: {{25 | sqrt}}</b> 
<br/> 
<b>Square root of 729 is: {{729 | sqrt}}</b>

Ниже приводится вывод -