在Angular 8中，在同一个文件中定义自定义管道时出错。

Question

我有一个ts文件，其中我声明了几个管道，如图所示。

    import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({ name: 'round' })
export class RoundPipe implements PipeTransform {
  transform(input: number) {
    return Math.round((input + Number.EPSILON) * 100) / 100;
  }
}

@Pipe({ name: 'fractionDigits' })
export class FractionDigitsPipe implements PipeTransform {
  transform(input: string, maximumFractionDigits: number) {
    return parseFloat(input).toFixed(maximumFractionDigits);
  }
}

@Pipe({ name: 'stripTags' })
export class StripTags implements PipeTransform {
  transform(input: string) {
    return input.replace(/<\/p>/gi, ' ').replace(/<\/?[^>]+(>|$)/g, '').replace(/&nbsp;/gi,' ');
  }
}

@Pipe({ name: 'camelize' })
export class Camelize implements PipeTransform {
  transform(str: string) {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
  }
}

@Pipe({ name: 'formatDate' })
export class FormatDate implements PipeTransform {
  transform(input: string) {
    return moment(input).format('DD/MM/YYYY');
  }
}

@Pipe({ name: 'dateTimeFormat' })
export class FormatDateTime implements PipeTransform {
  transform(input: string) {
    if (input === null) {
      return '';
    }
    return moment(input).format('DD/MM/YYYY HH:mm:ss');
  }
}

export function getBase64ImageFromURL(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.setAttribute('crossOrigin', 'anonymous');
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      const dataURL = canvas.toDataURL('image/png');
      resolve(dataURL);
    };
    img.onerror = error => {
      reject(error);
    };
    img.src = url;
  });
}

我创建了一个 module 将它们全部从我的 AppModule 文件。这是我的 pipes.module.ts 文件。

    import { NgModule } from '@angular/core';
import { StripTags, Camelize, FormatDate, FormatDateTime, FractionDigitsPipe, RoundPipe } from './models/helper';


@NgModule({
  imports: [],
  declarations: [
    StripTags,
    Camelize,
    FormatDateTime,
    RoundPipe,
    FormatDate,
    FractionDigitsPipe
  ],
  exports: [
    StripTags,
    Camelize,
    FormatDateTime,
    RoundPipe,
    FormatDate,
    FractionDigitsPipe
  ]
})
export class PipesModule {
  static forRoot() {
    return {
        ngModule: PipesModule,
        providers: [],
    };
}
}

我把它加到我的 app.module.ts 主模块文件是这样的。

 imports: [
       .......
       PipesModule.forRoot(),
       .......
 ]

但是，当我尝试使用它时，所有管道都出现了以下错误。

ERROR in : 找不到管道'xxx'。

知道我做错了什么吗？

Answer 1

你需要在导入的管道下添加你想在 app.module.ts

imports: [RoundPipe],