我们如何在 ionic3 的不同延迟加载页面中导入管道文件？

Question

这个问题和How can we use Provider in Pipe files while using Deep Linking and Lazy Loading Ionic 3?非常相似，但是在这个问题中，我们不使用Provider。

我有 2 个延迟加载页面 Page1 和 Page2 以及主页作为根页面。另外，MyPipe文件就是Pipe文件。如下所示。我想在 LAzy Loading Files Page1 and Page2 和 HomePage

中使用这个 Pipe 文件

情况 1：如果我仅在 app.module

上添加 Pipe 文件

page1.module.ts ( no imported Pipe file). We use pipe in page1.html
page2.moudel.ts ( no imported Pipe file). We use pipe in page2.html
app.module.ts ( import Pipe file). we use pipe in home.html

然后出现以下错误

Runtime Error Uncaught (in promise): Error: Template parse errors: The pipe 'myPipe' could not be found (" {{[ERROR ->]'test1' | myPipe}} "): ng:///Page1PageModule/Page1Page.html@16:2 Error: Template parse errors: The pipe 'myPipe' could not be found (" {{[ERROR ->]'test1' | myPipe}} "):

Case 2：如果我将 Pipe 文件导入 Page1Module 和 Page2Module

page1.module.ts ( imported Pipe file). We use pipe in page1.html
page2.moudel.ts ( imported Pipe file). We use pipe in page2.html
app.module.ts ( no import pipe.ts). we use pipe in home.html

然后出现以下错误

Runtime Error Uncaught (in promise): Error: Type MyPipe is part of the declarations of 2 modules: Page1PageModule and Page2PageModule! Please consider moving MyPipe to a higher module that imports Page1PageModule and Page2PageModule. You can also create a new NgModule that exports and includes MyPipe then import that NgModule in Page1PageModule and Page2PageModule. Error: Type MyPipe is part of the declarations of 2 modules: Page1PageModule and Page2PageModule! Please consider moving MyPipe to a higher module that imports Page1PageModule and Page2PageModule. You can also create a new NgModule that exports and includes MyPipe then import that NgModule in Page1PageModule and Page2PageModule.

感谢您的推荐。

Answer 1

很简单。这是我的工作流程。

我用这个 CLI 创建了 pipe：ionic generate pipe MyFilter
然后它会自动创建pipes.module.ts。
之后，我只是 import 它进入我的延迟加载页面的 module 如下。

member.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MemberPage } from './member';
import { PipesModule } from '../../pipes/pipes.module';

@NgModule({
  declarations: [
    MemberPage,
  ],
  imports: [
    IonicPageModule.forChild(MemberPage),
    PipesModule <-- here
  ],
})
export class MemberPageModule { }

就是这样。没有错误，pipe 也工作得很好 :)

我们如何在 ionic3 的不同延迟加载页面中导入管道文件？

How can we import Pipe file in different Lazy Loading Pages in ionic3?

lazy-loading

typescript

ionic3

angular