没有 CustomPipe 的提供者 - angular 4

Question

我有一个使用 angular 十进制管道转弯的自定义十进制格式管道。该管道是共享模块的一部分。我在功能模块中使用它，并且在运行应用程序时没有出现提供程序错误。

如有错字请忽略.

./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 { }

我将自定义管道注入其中一个组件并调用转换方法来获取转换后的值。共享模块导入到特性模块中。

Answer 1

如果你想在组件中使用管道的transform()方法，你还需要在模块的提供者中添加CustomPipe：

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

...

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

Answer 2

除了将 CustomPipe 添加到模块的提供程序列表之外，另一种方法是添加到组件的提供程序。如果您的自定义管道仅用于少数组件，这会很有帮助。

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

希望对您有所帮助。

Answer 3

您还可以使管道可注入（与使用 cli 创建的服务相同）：

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

    @Pipe({
      name: 'customDecimalPipe'
    })
    @Injectable({
      providedIn: 'root'
    })
    export class CustomPipe extends PipeTransform {
      ...
    }

没有 CustomPipe 的提供者 - angular 4

No Provider for CustomPipe - angular 4

angular-module

angular-pipe

angular