ionic4頁面跳轉傳參

ionic 頁面跳轉傳參

在跳轉前頁面

首先引入一個包

import {NavController} from '@ionic/angular';

其次在構造函數中加載依賴

  constructor(public nav:NavController) {}

然后攜帶參數跳轉頁面

    this.nav.navigateRoot(['news'],{
      queryParams:{
        'page':"123",
        'wjw':"zheshiyigecanshu"
      }
    });

在接收參數頁面 ts 中

在新頁面獲取參數,首先嘞，導入一個小包包

import {  ActivatedRoute, Params } from '@angular/router';

然后在構造函數中直接接受參數

   constructor(public activeRoute: ActivatedRoute) {
    this.activeRoute.queryParams.subscribe((params: Params) => {
      this.page = params['page'];
      this.page1 = params['wjw'];
      console.log("params:",this.page,this.page1)
    });
   }

OK了！

返回上一頁

在新的頁面添加一個按鈕，點擊返回按鈕的時候，轉到上一頁

back(){
    this.nav.back()
}

Ionic 更新的速度就和中國發展速度一樣，賊雞兒快，說不准啥時候又變了、

還有一種方法，感覺這個好

前一頁面

導包

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

注入依賴

constructor( public router: Router) {}

頁面跳轉

this.router.navigate(['news'], {
      queryParams: {
        'wjw': 'nihao'
      }
    });

第二個頁面

也得導包，和上邊一樣

import {  ActivatedRoute, Params } from '@angular/router';

注入依賴

constructor(public activeRoute: ActivatedRoute ) {}

接受參數

this.activeRoute.queryParams.subscribe((params: Params) => {
      console.log(params['wjw']);
   });