如何在 IONIC 3 中使用路由 [英] How to use routing in IONIC 3
问题描述
我正在开发 Ionic 3 应用程序.现在我正在使用 NavController 来路由和切换页面.
I am developing an Ionic 3 application. Right now I am using NavController for routing and switching pages.
例如:this.navCtrl.push(DetailsPage);
但我现在需要使用 Angular 路由.
But I need to use Angular routing now.
我发现了类似的问题 对于 Ionic 2，但在 Ionic 3 中也可以吗?
I found similar question for Ionic 2, but does this work in Ionic 3 as well?
谁能详细说明一下?
推荐答案
查看此链接了解 NavController 的详细信息 链接.您必须将其导入当前的 ts 文件，然后是 =>
Check this link for the detail of NavController link. Which you have to import into your current ts file, followed by =>
我们可以在 ionic 中使用两种导航方式
There are two ways of navigation we can make use in ionic
1) DeepLink
2) 组件导航栈
深度链接
deeplink 导航类似于网页导航，如下例所示您必须使用 @ionicpage 注释才能使用深度链接导航
deeplink navigation acts like webpage navigation like below example you have to use @ionicpage anotation in order to use deeplink navigation
https://locallhost:8000/#/HomePage/SecondPage
组件导航
您必须在受尊重的 ts 文件中导入您的组件才能导航
You have to import your component in the respected ts file in order to navigate
有push、pop、setRoot三个关键词.
There are three key words push, pop, setRoot.
setRoot
示例:
this.navCtrl.setRoot(HomePage);
this.navCtrl.setRoot(HomePage);
(或)
this.navCtrl.setRoot("主页");//深度链接导航
this.navCtrl.setRoot("HomePage"); //DeepLink navigation
用于使组件成为根页面，也就是说，它创建一个空的导航堆栈，其中主页是根.
Used to make the component as Root page, in other words, it creates an empty navigation stack where homepage is the root.
推
示例:
this.navCtrl.push(SecondPage);
this.navCtrl.push(SecondPage);
(或)
this.navCtrl.push("SecondPage");//深度链接导航
this.navCtrl.push("SecondPage"); //DeepLink navigation
上面的例子有 push 关键字，其中导航堆栈在其堆栈内有一个组件，然后是主页.我的意思是，在主页组件之后，您将在导航堆栈中拥有第二页组件(主页/第二页).
The above example has push keyword where the navigation stack has one component inside its stack followed by Homepage. I mean, after homepage component, you will be having secondpage component in the navigation stack (HomePage/SecondPage).
流行音乐
示例:
this.navCtrl.pop();
this.navCtrl.pop();
(或)
this.navCtrl.pop();//深度链接导航
this.navCtrl.pop(); //DeepLink navigation
考虑你现在在第二页，想回到上一页，也就是主页.然后只需使用上面的示例，它将从导航堆栈中弹出一个组件，并且只为您提供导航堆栈中的主页组件.
Consider you are in secondpage now and wanted to go back to the previous page which is home page. Then just use the above example it will pop one component from the navigation stack and gives you only the homepage component in the navigation stack.
这篇关于如何在 IONIC 3 中使用路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
