각도 4-파이프

이 장에서는 Angular 4의 파이프에 대해 설명합니다. 파이프는 이전에 Angular1에서 필터라고 불렸고 Angular 2와 4에서는 파이프라고 불 렸습니다.

| 문자는 데이터를 변환하는 데 사용됩니다. 다음은 동일한 구문입니다.

{{ Welcome to Angular 4 | 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 4 Project!';
}

다음 코드 줄은 app.component.html 파일.

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

다음 스크린 샷과 같이 브라우저가 나타납니다.

Angular 4는 몇 가지 내장 파이프를 제공합니다. 파이프는 아래에 나열되어 있습니다-

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 4 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);
   }
}

사용자 지정 파이프를 생성하려면 Angular / core에서 파이프 및 파이프 변환을 가져와야합니다. @Pipe 지시문에서 .html 파일에서 사용될 파이프에 이름을 지정해야합니다. 우리는 sqrt 파이프를 생성하고 있으므로 이름을 sqrt로 지정합니다.

계속 진행하면서 클래스를 만들어야하며 클래스 이름은 SqrtPipe. 이 클래스는PipeTransform.

클래스에 정의 된 변환 메서드는 인수를 숫자로 취하고 제곱근을 취한 후 숫자를 반환합니다.

새 파일을 만들었으므로 동일한 파일을 app.module.ts. 이것은 다음과 같이 수행됩니다-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
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
   ],
   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>

출력은 다음과 같습니다.