パイプ

パイプは、テンプレート内のデータを変換するために使用される関数です。一般的に、パイプは副作用を引き起こさない「純粋な」関数です。Angularには、コンポーネントでインポートして使用できる、役立つ組み込みパイプがいくつかあります。カスタムパイプの作成もできます。

このアクティビティでは、パイプをインポートしてテンプレートで使用します。

テンプレートでパイプを使用するには、補間の式に含めます。次の例をご覧ください。

      
import {UpperCasePipe} from '@angular/common';
@Component({
    ...
    template: `{{ loudMessage | uppercase }}`,
    imports:[UpperCasePipe],
})
class AppComponent {
    loudMessage = 'we think you are doing great!'
}
    

今度は、実際に試してみましょう。

1. LowerCase パイプをインポートする

   まず、@angular/common から LowerCasePipe のファイルレベルのインポートを追加して、app.component.ts を更新します。

         
   import { LowerCasePipe } from '@angular/common';
       

2. パイプをテンプレートのインポートに追加する

   次に、@Component() デコレータの imports を更新して、LowerCasePipe への参照を含めます。

         
   @Component({
       ...
       imports: [LowerCasePipe]
   })
       

3. パイプをテンプレートに追加する

   最後に、app.component.ts のテンプレートを更新して、lowercase パイプを含めます。

         
   template: `{{username | lowercase }}`
       

パイプは、出力の構成に使用できるパラメーターも受け取れます。次のアクティビティで詳しく説明します。

追伸、あなたは素晴らしいです⭐️