Question

我必须在角度4中实现我的自定义管道，但是在我尝试使用此自定义管道的组件中时出现以下错误：

<div>{{ selected.lastModifiedDate | formatdate}}</div>

模板解析错误：无法找到管道'formatdate'

我的自定义管道目前是空的：

formatdate.pipe

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

@Pipe({
  name: 'formatdate'
})

export class FormatdatePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return null;
  }
}

我有一个共享管道模块

pipe.module

import { NgModule } from '@angular/core';
import { FormatdatePipe } from '../pipes/formatdate.pipe';

@NgModule({
  imports: [],
  declarations: [FormatdatePipe],
  exports: [FormatdatePipe],
})

export class PipeModule {

  static forRoot() {
    return {
      ngModule: PipeModule,
      providers: [],
    };
  }
}

在我的主要应用模块中

app.module

import { PipeModule } from './shared/pipes/pipe.module';

@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(routes),
    PipeModule.forRoot(),
....

问题出在哪里？也许是模块中的东西

Answer 1

您需要导入declarations app.module中的模块，而不是导入。

import { PipeModule } from './shared/pipes/pipe.module';

@NgModule({
  declarations: [
    AppComponent,
    PipeModule.forRoot()
  ],
  imports: [
    BrowserModule,
    .......

Answer 2

尝试将管道添加到管道模块的providers数组中，而不只是添加到declarations和exports中。

不需要为管道单独创建一个模块，但这绝对是您的替代选择。查看官方文档脚注：https://angular.io/guide/pipes#custom-pipes

您使用自定义管道的方式与使用内置管道的方式相同。
您必须将管道包含在AppModule的声明数组中。如果选择将管道注入到类中，则必须在NgModule的providers数组中提供它。

您要做的就是将管道添加到 declarations 数组中，并在要使用管道的module中添加 providers 数组。

declarations: [
...
CustomPipe,
...
],
providers: [
...
CustomPipe,
...
]

自定义管道没有找到角4

2 个答案: