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.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
}

次のコード行は app.componentl ファイルに入ります-

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

次のスクリーンショットに示すようにブラウザが表示されます-

Angular Project

ここに角度付きで利用可能ないくつかの組み込みパイプがあります-

小文字パイプ
大文字パイプ
デートパイプ
通貨パイプ
ジョンソンパイプ
パーセントパイプ
デシマルパイプ
スライスパイプ

小文字と大文字のパイプはすでに見ました。他のパイプがどのように機能するかを見てみましょう。次のコード行は、 app.component.ts ファイルで必要な変数を定義するのに役立ちます-

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   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.componentl ファイルでパイプを使用します-

<!--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 and Pipe Transformをインポートする必要があります。 @Pipeディレクティブで、パイプに名前を付ける必要があります。これは、lファイルで使用されます。 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* に同じものをインポートし、ファイルのパスを指定する必要があります。 また、上記のように宣言に含める必要があります。

*app.componentl* ファイルでsqrtパイプに対して行われた呼び出しを見てみましょう。

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

以下は出力です-

カスタムパイプ

Angular7-pipes

Angular7-パイプ

カスタムパイプを作成する方法？