How to route within the tab component in ionic

问题:

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

回答1:

Navigate to the TypeScript file for your 'Contact' page. In this file, you need to create a function that pushes the add-contact page when the 'ADD CONTACT' button is clicked.

Ensure that the NavController has been imported:

import { NavController } from 'ionic-angular';

Below the import, your code should look something like this:

export class ContactPage {

constructor(public navCtrl: NavController) {

}


addPageLink() {
this.navCtrl.push(addContactPage);
{



{

Now navigate back to the HTML page for your 'Contacts' page:

In the code for your 'ADD CONTACT' button, you will need to call the function you just created.

Your code should look similar to this:

<button ion-button (click)="addPageLink()">
ADD CONTACT
</button>

Now, when the button is clicked, you should be redirected to the 'add-contact' page.

I hope this helps, please let me know how you get on and of course let me know if you have any additional questions.

回答2:

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/