web-dev-qa-db-ja.com

CustomPipeのプロバイダーなし-angular 4

angular Decimal pipe inturn。このパイプは共有モジュールの一部です。これを機能モジュールで使用しています。応用。

タイプミスがある場合は無視してください。

./ src/pipes/custom.pipe.ts

import { DecimalPipe } from '@angular/common';
..
@Pipe({
    name: 'customDecimalPipe'
})
...
export class CustomPipe {
constructor(public decimalPipe: DecimalPipe) {}
transform(value: any, format: any) {
    ...
}

./ modules/shared.module.ts

import  { CustomPipe } from '../pipes/custom.pipe';

...

@NgModule({
  imports:      [ .. ],
  declarations: [ CustomPipe ],
  exports:    [ CustomPipe ]
})
export class SharedModule { }

コンポーネントの1つにカスタムパイプを挿入し、変換メソッドを呼び出して、変換された値を取得します。共有モジュールは、機能モジュールにインポートされます。

angularangular-moduleangular-pipe
26
mperle

コンポーネントでパイプのtransform()メソッドを使用する場合は、モジュールのプロバイダーにCustomPipeを追加する必要もあります。

import  { CustomPipe } from '../pipes/custom.pipe';

...

@NgModule({
  imports:      [ .. ],
  declarations: [ CustomPipe ],
  exports:    [ CustomPipe ],
  providers:    [ CustomPipe ]
})
export class SharedModule { }
56
Stefan Svrkota

CustomPipeをモジュールのプロバイダーリストに追加する以外に、代替手段はコンポーネントのプロバイダーに追加することです。これは、カスタムパイプが少数のコンポーネントでのみ使用されている場合に役立ちます。

import  { CustomPipe } from '../pipes/custom.pipe';
...
@Component({
    templateUrl: './some.component.html',
    ...
    providers: [CustomPipe]
})
export class SomeComponent{
    ...
}

お役に立てれば。

6
Faruq

パイプを注入可能にすることもできます（cliを使用して作成するサービスで行われるのと同じ方法）。

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

    @Pipe({
      name: 'customDecimalPipe'
    })
    @Injectable({
      providedIn: 'root'
    })
    export class CustomPipe extends PipeTransform {
      ...
    }
1
José Antonio Postigo