Angular のパイプ

Angular は、文字列、通貨量、日付などのデータを変換およびフォーマットするために使用されるテンプレートファイルでいくつかのパイプも使用します。パイプラインの本質は、入力値を受け取り、特定のルールに従って変換された値を返すためにテンプレート式で使用できる単純な関数です。

Angular ビルトイン配管

**DatePipe:** ローカル環境のルールに従って日付値をフォーマットします。
**UpperCasePipe:** すべてのテキストを大文字の出力に変換します。
**LowerCasePipe:** すべてのテキストを小文字の出力に変換します。
**CurrencyPipe:** 数値を、ローカル環境のルールに従って書式設定された通貨文字列に変換します。
**DecimalPipe:** 数値を小数点付きの文字列に変換し、ローカル環境の規則に従ってフォーマットします。
**PercentPipe:** 数値をパーセンテージ文字列に変換し、ローカル環境のルールに従ってフォーマットします。

パイプラインを使用します。

上記は Angular の組み込みパイプラインをいくつかリストしており、UpperCasePipeコード内の簡単なデモを使用してパイプラインの使用方法を示しています。

パイプライン演算子は、|テンプレート式でこのシンボルを使用して|、パイプラインが式で使用されていることを示します.|入力値はシンボルの前にあり、パイプラインの名前はシンボルの後ろにあります. Angular は対応する論理規則を使用します使用するパイプラインに応じてパイプラインを一致させます. 式の入力値が評価され、結果が返されて表示されます:

import {
    
     Component } from '@angular/core';

@Component({
    
    
  selector: 'app-root',
  template: `
  <h1>{
     
     { text | uppercase}}</h1>
  <h1>{
     
     { text}}</h1>
  `
})
export class AppComponent {
    
    
  text = 'Hello World!'
}

ここに画像の説明を挿入

パラメータとパイプチェーンを使用してデータをフォーマットする

冒頭で述べたように、Angular のパイプラインは本質的に関数であるため、オプションのパラメーターを受け入れ、このパラメーターに従って式の入力値を論理的に処理できます. このパラメーターは、文字列の戻り値にすることもできます. 関数,以下のDatePipeなど、

import {
    
     Component } from '@angular/core';

@Component({
    
    
  selector: 'app-root',
  template: `
  
  <h1>{
     
     { birthday}}</h1>
  <h1>{
     
     { birthday | date}}</h1>
  <h1>{
     
     { birthday | date: format()}}</h1> 
  <h1>{
     
     { birthday | date: 'yyyy-MM'}}</h1>
  <h1>{
     
     { birthday | date: 'yyyy-MM-HH'}}</h1>
  `
})
export class AppComponent {
    
    
  birthday = new Date();

  format(){
    
    
    return 'shortDate'
  }
}

ここに画像の説明を挿入
パイプラインチェーンを使用してデータをフォーマットする場合、前のパイプラインによって返された結果がパラメーターとして後続のパイプラインに渡されます。

import {
    
     Component } from '@angular/core';

@Component({
    
    
  selector: 'app-root',
  template: `
  <h1>{
     
     { birthday}}</h1>
  <h1>{
     
     {  birthday | date:'fullDate' | uppercase}}</h1>
  `
})
export class AppComponent {
    
    
  birthday = new Date();
}

ここに画像の説明を挿入

カスタムパイプライン

管道的本质是一个函数、このようにしてクラスをカスタマイズし、このクラスでデータロジック処理用の関数を定義し、それをパイプライン@Pipe()装饰器としてマークするために使用できるため、カスタムパイプラインが作成され、NgModuleこのパイプに導入された後に使用できるようになりますなくなっている。

ここでは、数値型のデータを受け取り、入力値を 10 倍して返すパイプラインを定義します:
1. まずクラスを作成し、名前を付けてMultiplyByTenPipeから、このクラスにPipeTransformインターフェイスを継承させ、変換メソッドを実装させます. この変換メソッドパイプラインを使用して、最初のパラメーターとして値を入力し、2 番目のパラメーターとして他のパラメーターをリストとして受け取り、変換された値を返します。
2. を使用して、@Pipe()装饰器このクラスをパイプラインとして宣言し、メタデータでパイプラインの名前を定義しますmultiplybyten。
3. このモジュールでパイプラインを使用できるように、NgModule メタデータの宣言フィールドにパイプラインを含めます。

// MultiplyByTenPipe类
import {
    
     Pipe, PipeTransform } from "@angular/core";

@Pipe({
    
    
    name: 'multiplybyten'
})

export class MultiplyByTenPipe implements PipeTransform{
    
    
    transform(value: any, ...args: any[]) {
    
    
        return value * 10;
    }
}

// AppModule 
import {
    
     NgModule } from '@angular/core';
import {
    
     BrowserModule } from '@angular/platform-browser';

import {
    
     AppRoutingModule } from './app-routing.module';
import {
    
     AppComponent } from './app.component';
import {
    
     MultiplyByTenPipe } from './pipes/multiplyByTenPipe';

@NgModule({
    
     // @NgModule() 装饰器 实际上是一个函数，接受一个元数据 
  declarations: [ // 可声明对象表： 声明属于本模块的组件、指令、管道
    AppComponent,
    MultiplyByTenPipe
  ],
  exports: [ // 导出表：在其他模块的组件中也可以使用是可声明对象，一般是可声明对象的子集
    
  ], 
  imports: [ // 导入表： 
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
    
     }

ここに画像の説明を挿入