Нет провайдера для CustomPipe - угловой 4

У меня есть собственный формат десятичного формата, который использует угловую десятичную трубку. Этот канал является частью общего модуля. Я использую это в функциональном модуле и не получаю ошибку провайдера при запуске приложения.

Пожалуйста, игнорируйте, если есть опечатка.

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

Если вы хотите использовать метод pipe transform() в компоненте, вам также нужно добавить CustomPipe к поставщикам модулей:

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

...

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

Ответ 2

Помимо добавления CustomPipe в список поставщиков модулей, альтернативой является добавление к поставщикам компонентов. Это может быть полезно, если ваш собственный канал используется только в нескольких компонентах.

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

Надеюсь это поможет.

Ответ 3

Вы также можете сделать канал Injectable (так же, как это делается с сервисами, которые вы создаете с помощью cli):

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

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