アングルビルトインパイプを延長する方法と理由

このポストは、もともと公開されているhttps://ahsanayaz.com/extend-angular-built-in-pipes .
角度は、通常我々の日常の角度仕事のために十分であるビルトイン・パイプの多くを提供します.しかし、いくつかの回私たちは自分自身を見つけ、私たち自身の解決策を書く必要があります.そのような場合、我々は何かを最初から書き始めるかもしれません.しかし、なぜホイールを再発明し、角度の上にビルドしないのはすでに私たちを提供する?この記事では、我々は独自のニーズを満たすために角パイプを拡張するつもりです.
我々は、拡張するつもりですtitleCase その角度のパイプは、下にあります@angular/common パッケージ.参照docs .
まず、パイプを作成しなければなりませんtitleCaseExtended , 単に以下のようにします:

ng generate pipe path-to-folder/title-case-extended

上記のフォルダの下にファイルを作成する必要がありますpath-to-folder , 名前title-case-extended.pipe.ts . 下のファイルの内容を見てみましょう.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'titleCaseExtended'
})
export class TitleCaseExtendedPipe implements PipeTransform {

  transform(value: any, ...args: any[]): any {
    return null;
  }

}

角のtitlecasepipeの拡張

我々は、アングルのビルトインを使用してパイプを拡張しますtitleCase パイプは次のようになります.

import { Pipe, PipeTransform } from '@angular/core';
import { TitleCasePipe } from '@angular/common';

@Pipe({
  name: 'titleCaseExtended'
})
export class TitleCaseExtendedPipe extends TitleCasePipe implements PipeTransform {
  constructor () {
    super();
  }
  transform(value: any, ...args: any[]): any {
    return null;
  }

}

カスタム機能の記述

パイプを拡張したので、独自のロジックを書ける.角のtitleCase パイプは、タイトルケースに変換できる文字列値を受け入れるだけです.オブジェクトの配列を渡す必要があると想像してください[{}] ) 入力として、所有しないコンポーネントに.つまり、テンプレートにアクセスできません.我々は角度の適用できませんtitleCase を返します.その正確な理由のために、我々はtitleCaseExtended パイプ.
第一に、我々のパイプもまたtitleCase . すなわち、単純な文字列でも動作します.

import { Pipe, PipeTransform } from '@angular/core';
import { TitleCasePipe } from '@angular/common';

@Pipe({
  name: 'titleCaseExtended'
})
export class TitleCaseExtendedPipe extends TitleCasePipe implements PipeTransform {
  constructor () {
    super();
  }
  transform(value: any, ...args: any[]): any {
    if (typeof value === 'string') {
      // if the value we have to transform is a simple string
      return super.transform(value);
    }
    return null;
  }

}

パイプに文字列が適用されている場合は以下の使用法を参照ください.

<!-- user.name is a string value -->
<div>
  {{user.name | titleCaseExtended}}
</div>

さて、配列を扱っている場合にはこのケースを処理します.そのためには、単に配列をループし、その要素を変換します.

import { Pipe, PipeTransform } from '@angular/core';
import { TitleCasePipe } from '@angular/common';

@Pipe({
  name: 'titleCaseExtended'
})
export class TitleCaseExtendedPipe extends TitleCasePipe implements PipeTransform {
  constructor () {
    super();
  }
  transform(value: any, ...args: any[]): any {
    if (typeof value === 'string') {
      // if the value we have to transform is a simple string
      return super.transform(value);
    } else if (Array.isArray(value)) {
      // if the value we have to transform is an array
      return value.map((item) => {
        // transform item here..
        return item;
      });
    }
    return null;
  }

}

ここで2つの可能性があります.

それぞれitem 配列には単純な文字列があります.すなわち、我々は変換しなければならないstring[] .

それぞれitem 配列にはオブジェクトがあり、property 我々が働くことができること.すなわち、我々は変換しなければならないitem[property] .

以下のケースを扱いましょう.

文字列値の配列の変換

文字列の配列で動作するには、単に角度のtitleCase パイプ.

import { Pipe, PipeTransform } from '@angular/core';
import { TitleCasePipe } from '@angular/common';

@Pipe({
  name: 'titleCaseExtended'
})
export class TitleCaseExtendedPipe extends TitleCasePipe implements PipeTransform {
  constructor () {
    super();
  }
  transform(value: any, ...args: any[]): any {
    if (typeof value === 'string') {
      // if the value we have to transform is a simple string
      return super.transform(value);
    } else if (Array.isArray(value)) {
      // if the value we have to transform is an array
      return value.map((item) => {
        // if the current item in the array is a simple string, we transform it
        if (typeof item === 'string') {
          return super.transform(item);
        }
        return item;
      });
    }
    return null;
  }

}

文字列の配列に対するパイプの使用例を以下に示します.

@Component({})
class MyComponent {
  subjects = ['Computer Science', 'Maths', 'Biology']
}

<!-- each item in `subjects` is a string value -->
<div class="subjects">
  <div class="subjects__subject"
    *ngFor="let subject of subjects | titleCaseExtended">
    <!-- we don't have to modify the `name` property here now -->
    {{user.name}}
  </div>
</div>

オブジェクトの配列の変換

オブジェクトの配列で動作するには、オブジェクト内のプロパティを変換する必要があります.例えば、もし私たちがusers プロパティを持つ配列full_name それは変換される必要があります、我々はどうにか、この資産を通過する必要がありますfull_name 我々のパイプで.
まず、目的のプロパティの引数を読み込むコードを追加します.

import { Pipe, PipeTransform } from '@angular/core';
import { TitleCasePipe } from '@angular/common';

@Pipe({
  name: 'titleCaseExtended'
})
export class TitleCaseExtendedPipe extends TitleCasePipe implements PipeTransform {
  constructor () {
    super();
  }
  transform(value: any, ...args: any[]): any {
    const property = args[0];
    const isValidProperty = property && typeof property === 'string';
    if (typeof value === 'string') {
      // if the value we have to transform is a simple string
      return super.transform(value);
    } else if (Array.isArray(value)) {
      // if the value we have to transform is an array
      return value.map((item) => {
        // if the current item in the array is a simple string, we transform it
        if (typeof item === 'string') {
          return super.transform(item);
        }
        return item;
      });
    }
    return null;
  }

}

上記のスニペットでは、transform 関数使用args[0] と変数に代入するproperty . それから、我々はproperty プロパティの型がstring それで、我々はそれを変えることができます.
次のステップは、property に変換し、item . 以下のコードスニペットを見てください.

import { Pipe, PipeTransform } from '@angular/core';
import { TitleCasePipe } from '@angular/common';

@Pipe({
  name: 'titleCaseExtended'
})
export class TitleCaseExtendedPipe extends TitleCasePipe implements PipeTransform {
  constructor () {
    super();
  }
  transform(value: any, ...args: any[]): any {
    const property = args[0];
    const isValidProperty = property && typeof property === 'string';
    if (typeof value === 'string') {
      // if the value we have to transform is a simple string
      return super.transform(value);
    } else if (Array.isArray(value)) {
      // if the value we have to transform is an array
      return value.map((item) => {
        // if the current item in the array is a simple string, we transform it
        if (typeof item === 'string') {
          return super.transform(item);
        } else if (isValidProperty && item[property]) {
          // if the item in the array is an object and we have the property in the object, we transform item
          item[property] = super.transform(item[property]);
        }
        return item;
      });
    }
    return null;
  }

}

オブジェクトの配列に対するパイプの使用例を以下に示しますngx-bootstrap typeahead :

@Component({})
class MyComponent {
  users = [{
    full_name: 'Ahsan Ayaz'
  }, {
    full_name: 'Mohsin Ayaz'
  }, {
    full_name: 'Saad Qamar'
  }, {
    full_name: 'Mehdi Rajani'
  }]
}

<!-- each item in `subjects` is a string value -->
<form class="form">
  <input class="owner"
    id="ownerInput" [typeahead]="users | titleCaseExtended : 'full_name'" type="text"
    typeaheadWaitMs="300" typeaheadOptionField="full_name">
</form>

我々が使用していることに注意してください| titleCaseExtended : 'full_name' . このfull_name はtransform 角度による方法、そして、我々は我々のパイプでそれを利用しますargs[0] . オブジェクトの配列を持つngxbootstrapのtypeaheadは、私たちのパイプが輝くことができる本当に良いユースケースです.入力としてtypeaheadにそれを渡すとき、我々はアイテムの中で資産を変えることができないので.
ウェルップ!私たちの拡張パイプを使用する準備が整いました.パイプのコードと例の使い方をこれから得ることができますGist 同様に.

結論

角度は箱からたくさんのものを提供します、そして、我々はそれらのものの上に我々自身のものを構築することができます.これはただ一つの例でした.私は本当にこの記事を読んだ後に何を構築知っている.独自に作成するには、サービスやパイプを拡張することができます.
あなたがこの記事で何か新しいことを学んだならば、あなたのサークルでそれを共有してください.
また、どちらかに行くhttps://ahsanayaz.com または、あなたは、私がこれらの日角、JavaScriptとウェブ発展に関連しているという驚くべき内容のより多くを見ます.