如何在离子的选项卡组件中进行布线 [英] How to route within the tab component in ionic

问题描述

我只是具有某些角度知识的离子技术的初学者.我有选项卡模板，活动"选项卡在页面上将具有3个选项卡按钮，如下图所示:

如图所示，当用户单击时:

• about按钮，用户将被路由到about page
• home按钮，用户将被路由到home page
• contact按钮，用户将被路由到contact page

在标签页内.这种情况下工作正常.

现在，我还有另一个页面称为add-contact.当用户单击contact页面中的add-contact按钮时，他必须与tabs-menu一样被路由到add-contact页面:

在冲浪时我收到了这个 问题 .在这里，它们将与clicked object ID一起路由到其他页面，并显示该对象properties.

我不想执行这样的操作，我只想路由第二页(即添加联系人)，如第二幅图像所示.

由于pages较多，我给 解决方案

NavController是一种Ionic V3导航方法

请参见 https://ionicframework.com/docs/v3/api/components/tabs/Tab/和 https://ionicframework.com/docs/v3/api/navigation/NavController/了解详情.

因此，在每个选项卡根页面中，您都可以使用

import { NavController } from 'ionic-angular';

constructor(public navCtrl: NavController) {}

在您的方法中: this.navCtrl.push(NewPage)导航到新页面.

这是经过修改的堆叠闪电战:

https://stackblitz.com/edit/ionic-oykegj

Ionic V4主要使用角度路由

请参阅: https://ionicframework.com/docs/navigation/angular

您必须声明路线，然后使用[routerLink]进行导航.一开始需要做更多的工作，但是功能却很强大.

本教程介绍了如何更新您的应用以及原因: https://www.joshmorony.com/converting-ionic-3-push-pop-navigation-to-angular-routing-in-ionic-4/

I am just a beginner to ionic with some angular knowledge.I have tabs template, The Activity tab will have 3 tab-buttons on the page as shown in below image:

As shown in the image when the user click on:

• about button, the user will be routed to about page
• home button, the user will routed to home page
• contact button, the user will routed to contact page

within tabs page . This scenario works fine.

Now i have another page called add-contact. When the user click on add-contact button in contact page he must be routed to add-contact page along with tabs-menu something like this:

While surfing i got this question. Here they are routing to other page along with the clicked object ID and displaying that object properties.

I don't want to perform such operation, I just want to route another page (i,e add-contact) as shown in the 2nd image.

Since pages are more, i am giving Stackblitz DEMO

解决方案

NavController is an Ionic V3 navigation method

See https://ionicframework.com/docs/v3/api/components/tabs/Tab/ and https://ionicframework.com/docs/v3/api/navigation/NavController/ for details.

So inside each of the tab root pages you can use

import { NavController } from 'ionic-angular';

constructor(public navCtrl: NavController) {}

And in your method: this.navCtrl.push(NewPage) to navigate to a new page.

Here is the modified stackblitz:

https://stackblitz.com/edit/ionic-oykegj

Ionic V4 primarily uses Angular Routing

See: https://ionicframework.com/docs/navigation/angular

You'll have to declare routes then use [routerLink] to navigate. It's a little more work at the beginning, but quite powerful.

This tutorial runs through how to update your app and why: https://www.joshmorony.com/converting-ionic-3-push-pop-navigation-to-angular-routing-in-ionic-4/

这篇关于如何在离子的选项卡组件中进行布线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！