Angular パイプ グローバル宣言

パイプとは

パイプは、テンプレート式内で入力値を受け取り、変換された値を返すシンプルな関数です。Angular では、日付のフォーマット、通貨の表示、テキストの変換など、さまざまなデータの表示をカスタマイズするためにパイプを使用します。

グローバルパイプの宣言方法

2. 他のモジュールで使用する
   他のモジュールでグローバルパイプを使用するには、そのモジュールの imports 配列に AppPipesModule をインポートします。

   // app.module.ts
   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppRoutingModule } from './app-routing.module';
   import { A   ppComponent } from './app.component';
   import { AppPipesModule } from './app-pipes.mod   ule';
   
   @NgModule({
       declarations: [
           AppComponent
       ],
       imports: [
           BrowserModule,
           AppRoutingModule,
           AppPipesModule
       ],
       bootstrap: [AppComponent]
   })
   export class AppModule {}
   

パイプの使用例

<p>Original text: {{ originalText }}</p>
<p>Transformed text: {{ originalText | myCustomPipe }}</p>

注意

• 特定のモジュールでのみ必要なパイプは、そのモジュール内で宣言して使用することをおすすめします。
• グローバルパイプは、アプリケーション全体で使用できますが、過度に使用するとアプリケーションの構造が複雑になる可能性があります。

<p>Original text: {{ originalText }}</p>
<p>Transformed text: {{ originalText | myCustomPipe }}</p>

Shared Module を利用する

手順

1. // shared.module.ts
   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { MyCustomPipe } from './my-custom.pipe';
   
   @NgModule({
       imports: [
           CommonModule
       ],
       declarations: [
           MyCustomPipe
       ],
       exports: [
           MyCustomPipe
       ]
   })
   export class SharedModule {}
   

1. // core.module.ts
   import { NgModule } from '@angular/core';
   import { MyCustomPipe } from './my-custom.pipe';
   
   @NgModule({
       declarations: [
           MyCustomPipe
       ],
       exports: [
           MyCustomPipe
       ]
   })
   export class CoreModule {
       static forRoot(): ModuleWithProviders<CoreModule> {
           return {
               ngModule: CoreModule
           };
       }
   }
   

どちらの方法を選ぶか

• Shared Module は、複数のモジュールでインポートできます。
• Core Module は、アプリケーション内で一度しかインポートすべきではありません。