使用 JSON 网址导航/推送到页面

Question

我正在开发一个ionic2应用程序。 我有一个正在使用的 JSON 文件，我想设置一个类型或 URL 参数，我可以将其用于列表中的每个元素，以导航到 ionic2 中的特定页面。 我尝试了这样的东西：[navPush]="{{ data.url }}"但这不起作用。 还尝试了类似的东西：(click)="gotopage({{data.url}})"但这也不起作用。

我希望能够设置要动态导航到的页面(从 JSON 读取(，而不是对列表中的每个项目使用单独的函数

喜欢：

gotoPage() {
this.nav.push(PagetoNavigateTo);
}

Answer 1

Ionic 为此提供了一个很好的例子。只需创建一个这样的新项目：ionic start name sidemenu(或手动选择模板侧边菜单(。

在app.component.ts中，您将找到一个示例 JSON 数组pages和一个名为openPage()的函数。您可以将其用于自己的项目。

或者你可以在这里查看，在 GitHub 存储库中。

如果要使用strings进行页面导航，则需要延迟加载页面。这里有一个关于如何延迟加载页面的快速教程：

1. 从app.module.ts和app.component.ts中删除所有页面声明和导入。
2. 您需要为拥有的每个页面创建一个module.ts(例如home.module.ts(。它们可能看起来像这样：

home.module.ts

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

3. 现在你准备好了，只需在app.component.ts中将rootPage:any = HomePage更改为rootPage:string = 'HomePage

现在，您只需使用openPage()之类的函数即可浏览您的应用：

public openPage (name: string) : void {
this.nav.setRoot(name);
}