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存储库中查看here。

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

从app.module.ts和app.component.ts删除所有网页声明和导入。
您需要为每个页面创建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 {}

现在您已准备就绪，只需将rootPage:any = HomePage更改为rootPage:string = 'HomePage中的app.component.ts

现在您可以使用openPage()之类的功能来浏览您的应用：

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

使用JSON url导航/推送到页面

1 个答案: