Ionic 3,管道共享模块,用于延迟加载页面

Posted

技术标签:

【中文标题】Ionic 3,管道共享模块,用于延迟加载页面【英文标题】:Ionic 3, shared module for pipes, for lazy loaded pages 【发布时间】:2017-09-11 15:31:43 【问题描述】:

使用 ionic 3 页面可以使用 IonicPageIonicPageModule 延迟加载。问题是这些延迟加载的页面无法访问管道。

    Failed to navigate:  Template parse errors:
The pipe 'myPipe' could not be found ("")

This question 描述问题并提供解决方案。我对提议的解决方案唯一关心的是它需要在所有延迟加载的页面中导入共享模块pipes.module

哪一种还原了 angulr2 中引入的一个不错的功能,即在 app.module.ts 中只导入一次管道。

我认为应该有更好的方法,通过在app.module 中导入共享模块pipes.module,以便所有页面都可以看到所有管道。

这里是app.module.ts

    @NgModule(
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    PipesModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,

  ],
  providers: []
    )
    export class AppModule  

我们不应该使用

PipesModule.forRoot(MyApp)

要使所有延迟加载页面都可以访问PipesModule

这是pipes.moudle.ts 文件:

    @NgModule(
    declarations: [
        BreakLine,
        Hashtag,
        Translator
    ],
    imports: [

    ],
    exports: [
        BreakLine,
        Hashtag,
        Translator
    ]
    ,
)
export class PipesModule 

【问题讨论】:

【参考方案1】:

我就像你一样试图找到处理这个问题的正确方法,经过一些研究我会说这是我们应该处理这个问题的方式,因为以下原因。

来自角度faqs:

使用组件、指令和管道创建一个 SharedModule 您在应用程序的任何地方都可以使用。该模块应完全由 声明,其中大部分是导出的。

在您的功能模块中导入 SharedModule,这两个模块都已加载 当应用程序启动以及您稍后延迟加载的应用程序时

我还发现了这个 ionic 3 doc,它提供了一些关于如何处理组件、管道和服务的建议。

【讨论】:

我看过那个 Ionic 文档。关键是我的共享模块到处都需要。这就是为什么它应该在 app.module.ts 中导入一次,以便在所有其他组件中可见。【参考方案2】:

建议在单个页面模块中导入管道模块的新方法更好,因为您不必在app / pwa启动时加载管道,使用延迟加载使应用加载更快。

查看this 文章了解更多详情。

【讨论】:

我想在搜索过程中通过此链接。我明白这就是方法。我认为应该有一种更好的方法来减少到处对导入的编码。 供应商/服务怎么样?

以上是关于Ionic 3,管道共享模块,用于延迟加载页面的主要内容,如果未能解决你的问题,请参考以下文章

延迟加载Angular / Ionic 3 Component AOT“不是已知元素:错误”

将离子应用程序转换为延迟加载

在ionic2中使用图像和文本加载延迟列表

没有路由器的角度延迟加载模块

Vue路由器如何在页面加载时获取延迟加载模块的当前路由路径?

Angular <custom-component> 不适用于延迟加载的模块