CustomPipe 没有提供者 - 角度 4

Posted 2023-03-13

【中文标题】CustomPipe 没有提供者 - 角度 4

【英文标题】：No Provider for CustomPipe - angular 4

【发布时间】：2018-02-28 05:02:43

【问题描述】：

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

如有错别字请忽略。

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

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

【问题讨论】：

Angular 2/4 use pipes in services and components的可能重复

【参考方案1】：

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

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

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

【参考方案2】：

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

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

希望这会有所帮助。

【讨论】：

这比接受的答案更有意义（不能相信赞成票少了 10 倍）！为特定组件设计的管道不应该在全球范围内可用。欣赏法鲁克的逻辑。

【参考方案3】：

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

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

...

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

【讨论】：

感谢您的回答。所以这意味着 Pipe 变成了可注射的，所以必须提供它。我说的对吗？

@mperle 完全正确。

但是，这是否偏离了 Angular 的共享模块定义。 ?

@mperle 您可以将CustomPipe 添加到*ServiceModule*（如果您有专用的）或任何功能模块而不是共享模块。