ionic4 路由跳轉、ionic4 路由跳轉傳值 NavController 返回上一頁 、NavController 回到根

1、普通路由跳轉

 

<ion-button [routerLink]="['/pinfo']">
跳轉到詳情
</ion-button>

 

<ion-header> <ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
</ion-buttons>
<ion-title>pinfo</ion-title> </ion-toolbar>
</ion-header>

2、路由跳轉傳值

 

<ion-button [routerLink]="['/pinfo']" [queryParams]="{aid:'1234'}">
跳轉到詳情並傳值
</ion-button>

 

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router';
@Component({
　　selector: 'app-pinfo', 
　　templateUrl: './pinfo.page.html', 
　　styleUrls: ['./pinfo.page.scss'],
})
export class PinfoPage implements OnInit {
　　constructor(public route:ActivatedRoute) {

　　} 
　　ngOnInit() {
　　　　this.route.queryParams.subscribe((data)=>{ console.log(data);
　　}
}

3、NavController 返回上一頁

 

Ionic4.x 中從 tabs 切換頁面跳轉到其他頁面，使用 ion-back-button 返回的話，默認都會返回 到 tab1 頁面。如果我們想從那個 tab 頁面跳轉過去就返回到指定的 tab 頁面的話，這時候就 要用到 NavController 里面提到的 back 方法。

 

import { NavController } from '@ionic/angular'; 
constructor(public nav:NavController) { 
} 
this.nav.back(); 
this.nav.navigateBack('/tabs/tab3');

 

完整代碼

<ion-header> <ion-toolbar>
<ion-buttons slot="start"> <ion-button (click)="goBack()">
<ion-icon slot="icon-only" name="arrow-back"></ion-icon> </ion-button>
</ion-buttons>
<ion-title>pinfo</ion-title> </ion-toolbar>
</ion-header>

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
import { NavController } from '@ionic/angular';
@Component({
　　selector: 'app-pinfo', 
　　templateUrl: './pinfo.page.html', 
　　styleUrls: ['./pinfo.page.scss'],
})
export class PinfoPage implements OnInit {
constructor(
　　public route:ActivatedRoute,public nav:NavController) { } 
ngOnInit() {
this.route.queryParams.subscribe((data)=>{
　　 console.log(data);
})
　　console.log(window.history); }
goBack(){ 
　　this.nav.navigateBack('/tabs/tab3');
} 
}

4、NavController 回到根

import { NavController } from '@ionic/angular'; 
constructor(public nav:NavController) { 
} 
this.nav.navigateRoot('/tabs/tab3');