how to go to another page with a button click with ionic?

后端 未结 12 1789
粉色の甜心
粉色の甜心 2020-12-31 10:26

I have been trying to work with the code, I added the button but I don\'t know how to link it to another page when clicking on it.

相关标签:
12条回答
  • 2020-12-31 10:47

    For Ionic 5 - below code is working for me, with Ionic 5 + Angular 9 combination,

    Step 1 - In html file, add the code to "define" the function,

    <ion-button (click)="gotoHomePage()">Go to Homepage</ion-button>
    

    Step 2 - In the constructor of your class, you can Inject the NavController - Injecting NavController will always get you an instance of the nearest NavController, regardless of whether it is a Tab or a Nav.

    constructor(public navCtrl: NavController) { }
    

    Step 3 - In TS file for your component, add the method that you are calling on click of ion-button,

    gotoHomePage() {
        this.navCtrl.navigateForward('home');
      }
    

    Here the 'home' is defined route in your app-routing.module.ts file, like below,

    { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule) },
    
    0 讨论(0)
  • 2020-12-31 10:54

    html

    <ion-button (click)="nextpage()">Home</ion-button>
    
    

    ts

    
    import { Router } from '@angular/router';
    
    
    constructor(private route: Router) { }
    
      nextpage() {
        this.route.navigate(['/home']);
      }
    
    0 讨论(0)
  • 2020-12-31 10:54

    Many solutions I have tried don't work, but this one below it does for me.

    To go from home page to another page just watch this video: https://www.youtube.com/watch?v=paRZyKDHPak

    in the home.page.ts file add

    import { Router } from "@angular/router";
    

    set the constructor

    constructor(public router:Router) {}
    

    create the function

    redirectToOther(){
        this.router.navigateByUrl('other');
     }
    

    you guys can add a "go back button" to go back to the home page just adding this HMTL code in other.page.html, that's it

    <ion-buttons slot="start"><ion-back-button defaultHref="home"></ion-back-button></ion-buttons>
    
    0 讨论(0)
  • 2020-12-31 10:55

    You can call a route like this.

    <button onclick="location.href='/pageToRoute/param'" block>
    </button>
    
    0 讨论(0)
  • 2020-12-31 10:58

    Please use below code in Ionic 4 to go one page to another page:

    <ion-button expand="block" routerLink="/dashboard" routerDirection="root">Home</ion-button>
    

    (routerLink) to set the page name to when you go to the page.

    0 讨论(0)
  • 2020-12-31 11:00

    Place button inside anchor tag.

     <a href="path of the file"><button>Name</button></a>
    

    You can also refer this link: http://www.w3schools.com/tags/tag_a.asp

    0 讨论(0)
提交回复
热议问题