如何在Ionic 3项目中使用angular 4路由器?

时间:2017-04-05 07:56:49

标签: angular routing ionic2

我正在开发一个混合应用程序。使用离子导航路由器,它很容易在页面之间导航,但它不使用" URL路径"浏览器。

我看到我们可以在ionicModule上指定我们的链接。每次在某处导航时都可以使用它来指定关联的路径,离子将在浏览器中更改它。但是,使用它,如果您刷新浏览器,应用程序将丢失,您必须返回主页。

我认为可以简单地使用角度路由器,但是如何使用离子3?

感谢

1 个答案:

答案 0 :(得分:6)

首先,您在评论中引用了离子原生v3。然而,离子 - 天然和离子不是一回事。当您提出问题时,Ionic v3未正式发布,因此除非您使用测试版,否则我认为您仍然使用v2。

您不需要角度路由器来获取URL路径。在Ionic v2中,您可以这样做:

app.module.ts

export const deepLinkConfig: DeepLinkConfig = {
  links: [
    { component: Home, name: "home", segment: ""},
    { component: DetailPage, name: "detail", segment: "event/:id", defaultHistory: [Home] }
  ]
};

然后将其包含在您的导入中:

IonicModule.forRoot(MyApp, {}, deepLinkConfig)

您现在可以访问https://example.com/https://example.com/event/1来访问您应用的页面。重新加载网站时,defaultHistory参数会确保您仍然可以使用导航栏导航回上一页。

在离子v3中,您可以使用IonicPage注释来配置路线:https://ionicframework.com/docs/nightly/api/navigation/IonicPage/