How can we use Provider in Pipe files while using Deep Linking and Lazy Loading Ionic 3?

问题

I want to use a Provider, named as Translation.ts with a returnResult function in a Pipe named as TranslatePipe.ts. Translation.ts is

@Injectable()
export class TranslationProvider

  constructor() { }

  getResult(value) { returns something ; }

}

and TranslatePipe.ts is given as

@Pipe({
  name: 'translation',
})
export class TranslationPipe implements PipeTransform {

  constructor(public translateService: TranslationProvider) {

  }


  transform(value: string, ...args) {
    return this.translateService.getResult(value);
  }

MY project is Ionic 3 and I use Lazy Loading. My page is ExamplePage In ExamplePage.html I want to use piping as {{'something' | translation}}

and example.ts is

@IonicPage()
@Component({
  selector: 'example',
  templateUrl: 'example.html',
})
export class ExamplePage {

  constructor(public translate: TranslationProvider) {  }
}

app.module is something like that

@NgModule({
  declarations: [
    TranslatePipe,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [ .. ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    TranslationProvider
  ]
})

There is something related with this subject but they dont work such as

Ionic 3 Lazy Loading with amDateFormat pipe or
Pipe not found in custom component - Ionic 3 (Lazy Loading)

I try to modify example.module, I added Provider and Pipe but it did not work. Would you give me any recommendation about the solution?

回答1:

Include both provider and pipe in either app.module.ts OR example.module.ts based on whether you want to use in more pages or only in example page and not both.

You need to add them in the same module.

 declarations: [
    TranslatePipe,
  ],
  //...
  providers: [
    TranslationProvider
  ]

来源：https://stackoverflow.com/questions/46361981/how-can-we-use-provider-in-pipe-files-while-using-deep-linking-and-lazy-loading

标签

angular

lazy-loading

ionic3

deep-linking