app.component 中的 Ionic 3 页面参考答案

【问题标题】：Ionic 3 page reference in app.componentapp.component 中的 Ionic 3 页面参考
【发布时间】：2017-09-11 10:12:22
【问题描述】：

我最近升级到实施 IonicPageModule 进行导航的 ionic 3。 push 和 setRoot 适用于所有导航但是我被困在试图引用 app.component.ts 中的页面

通常我会像这样从导入中引用页面

this.rootPage = user ? ProgramsPage : LoginPage;

其中LoginPage 和ProgramPage 在app.module.ts 中声明

但是在新的 angular 4 / ionic 3 设置中，对“页面”的引用是用字符串引用的，而没有在相关的 page.ts 中导入，并且似乎与 navCtrl 的推送和设置集成在一起

我试过了

import { LoginPageModule } from '../pages/login/login.module';

但这没有意义。

我认为为每个页面创建模块的全部意义在于首先启用延迟加载，同时最小化页面上的import 代码，而无需创建配置导出类。

问题是您不能两次声明 LoginPage 并且看到它已经通过 IonicPageModule 声明为模块，无法再次添加该导出类。

所以只是想知道当你想应用逻辑时如何引用离子 3 页模块？

【问题讨论】：

你能给出一个你会明确使用导航以外的页面对象的用例吗？
“除了导航”是什么意思？
NavController 具有从其堆栈中获取页面视图的 api...我的意思不是从中推送/弹出...或者我误解了您的查询？
对于问题中的逻辑操作。如果有用户将页面设置为x，否则将其设置为y。这是基于逻辑的订阅事件，而不是基于用户导航的事件。我也有使用页面组件的护栏，由于更新而不再工作
this.rootPage = user ? 'ProgramsPage' : 'LoginPage';这种方式不行吗？

标签： ionic-framework ionic3

【解决方案1】：

我遇到了一篇文章，它的实现与您真正想要的很接近；虽然它更多地谈论了云功能，但一开始它试图以一种非常时尚的方式解决你的问题。看看https://javebratt.com/firebase-cloud-functions-profile/

【讨论】：

【解决方案2】：

如果您的页面被声明为：

/* imports and stuff here ... */

@IonicPage()
@Component({
  selector: 'page-user',
  templateUrl: 'user.html'
})
export class UserPage { /* constructor, your code & else ... */ }

或使用 ionic-cli 通过运行生成：ionic g page NewAppPage 您将能够使用字符串页面名称而不是使用页面对象（这也需要您导入页面）。

看看https://www.javascripttuts.com/ionic-3-new-pages-lazy-loading/，它可能会帮助你更多地了解应用组件内部的延迟加载和页面。

【讨论】：

谢谢，是的，这一切似乎都被最新版本修复了。