angular - 我们如何在 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 和 Page2 以及 HomePage 中使用这个 Pipe 文件

案例 1:如果我仅在 app.module 上添加 Pipe 文件

• page1.module.t s(未导入 Pipe file)。我们在page1.html中使用管道
• page2.moudel.ts (没有进口 Pipe file)。我们在page2.html中使用管道
• app.module.ts (导入 Pipe file)。我们在 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}} "):

案例 2:如果我将 Pipe 文件导入到 Page1Module 和 Page2Module

• page1.module.ts (进口Pipe file)。我们在page1.html中使用管道
• page2.moudel.ts (进口Pipe file)。我们在page2.html中使用管道
• app.module.ts (没有导入 pipe.ts)。我们在 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

非常简单。这是我的工作流程。

1. 我使用此 CLI 创建 pipe:ionic generate pipe MyFilter

2. 然后它会自动创建pipes.module.ts。

3. 之后，我只需将其导入到我的延迟加载页面的模块中，如下所示。

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 { }

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