如何在 Ionic 3 项目中使用 Angular 4 路由器? [英] How to use angular 4 Router in an Ionic 3 project?

问题描述

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

I am developing an hybrid app. With the navigation router of ionic it is easy to navigate between page but it does not use the "URL path" of browsers.

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

I saw that we can specifie on the ionicModule our links. Using that each time you navigate somewhere you can specifie the associated path and ionic will change it on your browser. BUT using that, if you refresh your browser the app is lost and you have to go back to the home page.

我认为可以简单地使用角度路由器，但是在 ionic 3 中如何使用?

I thought it could be possible to simply use angular router, but how in ionic 3 ?

谢谢

推荐答案

首先，您在评论中引用了 ionic-native v3.但是， ionic-native 和 ionic 不是一回事.当您提出问题时，Ionic v3 尚未正式发布，因此除非您使用 beta 版本，否则我假设您仍然使用 v2.

First off, you are referencing ionic-native v3 in your comment. However, ionic-native and ionic are not the same thing. Ionic v3 was not officially released when you asked your question, so unless you used the beta version, I assume that you still use v2.

URL 路径不需要 Angular 路由器.在 Ionic v2 中，您可以这样做:

You don't need angular router for URL paths. In Ionic v2, you can do it like that:

app.module.ts

app.module.ts

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

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

And then include it in your imports:

IonicModule.forRoot(MyApp, {}, deepLinkConfig)

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

You can now access the pages of your app by visiting https://example.com/ or https://example.com/event/1. When reloading the website, the defaultHistory parameter makes sure that you still have the navigation bar to navigate back to the previous page.

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

In ionic v3, you can use the IonicPage annotation to configure your routes: https://ionicframework.com/docs/nightly/api/navigation/IonicPage/

这篇关于如何在 Ionic 3 项目中使用 Angular 4 路由器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！