javascript - Redirect to other page in ionic framework v3 - Stack Overflow

admin管理员组

文章数量:1320786

I am new to ionic framework. I am trying to redirect to other page on button click in ionic framework version 3. I did not get enough source on this. I tried location() and go() functions but it did not work.

This is my code in newpage.html :

<button ion-button block (click)="click()">Click me</button>

This is my code in newpage.ts :

  click() {
  this.go('/HomePage');
  }

I am new to ionic framework. I am trying to redirect to other page on button click in ionic framework version 3. I did not get enough source on this. I tried location() and go() functions but it did not work.

This is my code in newpage.html :

<button ion-button block (click)="click()">Click me</button>

This is my code in newpage.ts :

  click() {
  this.go('/HomePage');
  }

• javascript
• ionic-framework
• ionic3

Share Improve this question Follow asked Jul 18, 2017 at 7:43 Varuni N RVaruni N R 80233 gold badges1313 silver badges3232 bronze badges 5

• 1 May I ask, why don't you read the navigation-related docs in the first place? – sebaferreras Commented Jul 18, 2017 at 7:50
• Sorry i was keen on looking for button click. Did not think there could be a way to redirect from nav on button click – Varuni N R Commented Jul 18, 2017 at 7:51
• 1 Np, just mentioned that because navigation in Ionic is not as simple as it may look, so you'd definitely need to read the docs to avoid some bugs/issues. There are a lot of things to consider for your question, like is that the root ponent?, do you want to set that page as root, or just push it?, and so on... – sebaferreras Commented Jul 18, 2017 at 7:53
• 1 Okay thank u for the suggestion – Varuni N R Commented Jul 18, 2017 at 7:54
• 1 @sebaferreras - Hey found answer for setting as root ponent and just pushing it. Anyway thanks – Varuni N R Commented Jul 18, 2017 at 8:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Use the [NavController][1] from ionic-angular. Its push()-method pushes a new view onto the navigation stack. This means that you can use the NavController pop()-method to go back to this page.

import { NavController } from 'ionic-angular';
// IMPORT HOMEPAGE IF NOT LAZY-LOADED
import { HomePage } from '../home/home';

export class NewPage{
    constructor(private navCtrl:NavController){}

    // IF LAZY-LOADED
    click(){
        this.navCtrl.push('HomePage');
    }

    // IF NOT LAZY-LOADED
    click(){
        this.navCtrl.push(HomePage);
    }
}

According to the docs: "If the page has an <ion-navbar>, a back button will automatically be added to the pushed view."

本文标签： javascriptRedirect to other page in ionic framework v3Stack Overflow