导航到在推送通知有效负载上发送的路由

Question

我有一个ionic2应用程序接收来自 ionic.io 的推送通知。在通知有效负载上，我正在发送要导航到的所需路由。

let route = notification.payload.route;
if (route) {
that.navCtrl.push(route, notification.payload);
}

问题是有效负载以字符串形式出现，而 navCtrl 期望接收路由值。就像这个导入中的我的页面一样：

import { myPage } from '../pages.ts';

转换字符串的最佳方法是什么？ 或者如果有更好的方法可以做到这一点，也请随时提及。谢谢。

Answer 1

如果导航选项有限，您可以使用开关将用户发送到页面，例如：

let route = notification.payload.route;
if (route) {
switch(route){
case 'home':
that.navCtrl.push(MyHomePage, notification.payload);
break;
case 'Users':
that.navCtrl.push(MyUsersPage, notification.payload);
break;
case ...
}
}

这不是最美丽的方式，但应该有效。

编辑 - 离子3延迟加载方式

因此，由于您只想使用包含页面选择器的字符串，我认为您能够做到这一点的唯一方法是使用延迟加载组件。

在开始之前，如果您的项目不在 Ionic 3 上，请按照此更新日志步骤进行升级。

1)您需要从app.module.tsentryComponents中删除要延迟加载的页面并declatarions，当然，还要删除页面导入。 所以从这个

import { HomePage } from '../pages/home';
@NgModule({
declarations: [
MyApp, HomePage
],
imports: [
...
],
bootstrap: [IonicApp],
entryComponents: [
MyApp, HomePage
],
providers: [
...
]
})

它看起来像这样：

@NgModule({
declarations: [
MyApp
],
imports: [
...
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
...
]
})

2)在每个延迟加载的文件夹中，您都有3个文件，例如

-home
|- home.html
|- home.scss
|- home.ts

你需要创建另一个文件，一个home.module.ts

3)在您的home.module.ts上，您将需要此代码

import { NgModule } from '@angular/core';
import { HomePage } from './home';
import { IonicPageModule } from 'ionic-angular';
@NgModule({
declarations: [HomePage],
imports: [IonicPageModule.forChild(HomePage)],
})
export class HomePageModule { }

4)在您的home.ts上，您需要导入IonicPage装饰器并在@Component装饰器上方使用它

import { IonicPage } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'home',
templateUrl: 'home.html'
})

5)现在你已经准备好使用延迟加载了，你不需要导入页面，然后在推送/弹出页面时使用它，你需要把它作为一个字符串传递。 因此，如果您现在使用this.navCtrl.push(HomePage, data);，则可以使用this.navCtrl.push('HomePage', data);，让深层链接为您处理。

如果您需要更多信息，请参阅此延迟加载文档，了解如何实现此功能，但据我所知，这是您可以使用路由传递字符串值的唯一方法。

希望这对:)有所帮助