Pipe not found in custom component - Ionic 3 (Lazy

2019-08-17 13:10发布

问题:

In my ionic 3 project I have my pipes wrapped in a pipes.module.ts and importing it in @NgModule for all my lazy loaded pages - works fine without issues.

However using the same approach in my custom component, using pipe inside the component template results in an error:

 Error: Template parse errors: The pipe 'min2duration' could not be found

I tried also importing the pipe individualy in my component's .module.ts , but still same issue. The only way i made it work was to import the pipe in my components .ts file , wrap it in a function and us this function like this:

import { Min2duration  } from '../../pipes/dates/min2duration';
...

@Component({ ... })
class CustomComponent {
  constructor(){ ... }

  min2duration(val){
    var m2d = new Min2duration();
    return m2d.transform(val)
  }
}

and in template

<span>{{ min2duration(duration) }}</span>

This way it works, but it doesn't feel like a proper solution, especially as i am using more pipes and more custom components in my project.

Is there a way to make the pipe work also inside a custom component's template like this?

<span> {{ duration | min2duration }}</span>

Edit:

pipes.module.ts

import { NgModule } from '@angular/core';

// Pipes
import { DayMonth } from './dates/day-month'
import { Weekday  } from './dates/weekday';
import { Min2duration  } from './dates/min2duration';
import { HighlightPipe } from './highlight/highlight';

@NgModule({
  declarations: [
    DayMonth,
    Weekday,
    HighlightPipe,
    Min2duration
  ],
  imports: [ ],
  exports: [
    DayMonth,Weekday,HighlightPipe,Min2duration 
  ]
})
export class PipesModule {}

回答1:

Make sure you import your pipes.module inside your custom NgModule where your custom component is declared.