angular路由跳轉並傳值的多種方式

Angular的學習使用過程當中，路由跳轉支撐了項目的全過程，因此路由跳轉是一個很常見也是一個很容易忽略的點，，對於頁面之間的跳轉有着不少的問題，跳轉的方式/如何攜帶參數跳轉，下面是本身在學習過程當中對angular路由跳轉的總結（angular7）

路由跳轉的第一種方式-導航式跳轉

第一種：該指令接收一個連接參數數組，Angular將根據該數組來生成UrlTree實例進行跳轉。使用routerLink跳轉，在標籤的寫入將將要跳轉的頁面路徑寫在【】中，

<div routerLink="['/path']"></div>

若是有須要再路由跳轉的時候攜帶某些指定的參數，例如：id/ 在對應的ts文件中聲明一個id，將申明的id寫在傳遞參數queryParams對象中

<div routerLink="['/path']" [queryParams]="{id:key}" >跳轉</div>

　　點擊標籤跳轉之後獲取傳過來的參數 注意：接收時經過 queryParams 進行接收
首先引入

import {ActivatedRoute} from '@angular/router'
再聲明：
constructor(public route:ActivatedRoute) { }

接收： // 接收傳過來的值

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

 

第二種：動態路由傳值這種狀況是在瀏覽器中能夠顯示對應的參數 這種的是斜杆
在路由文件中進行配置path: 'devicepay/:id' */：id必傳

{ path: 'devicepay/:id',component:DevicepayComponent},

　　在html界面中進行跳轉

<a [routerLink]="['/devicepay/',key]">

　　在另外一界面中接收傳過來的參數 注意 ：動態路由接收時使用的是 params方法同上
引入

import {ActivatedRoute} from '@angular/router'
再聲明
constructor(public route:ActivatedRoute) {
接收： // 接收傳過來的值
    route.params.subscribe((res)=>{
      console.log(res)
    })
 }

　　

 

路由跳轉的第一種方式-編程式跳轉

第三種：動態js進行跳轉 主要在方法對象中使用
html 中 注意裏面傳入的i值是 循環中 獲取的索引值i

<li *ngFor="let item of resList ;let i=index">
  <button (click)='gotoDevicePay(i)'>跳轉到支付界面</button>
</li>

　　在路由文件中進行配置

{ path: 'devicepay',component:DevicepayComponent},

js中 進行路由跳轉仍是先引入----再聲明

定義點擊事件

gotoDevicePay(key){
    this.router.navigate(['/devicepay/'],{queryParams:{id:key}})//跳轉路徑 實現的是動態跳轉數據
  }

 

 

第四種：經過get方式能夠傳入多個參數到下一界面
引入 NavigationExtras

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

定義一個 goNewsContent 方法執行跳轉 ， 用 NavigationExtras

goNewsContent(){
    let navigationExtras: NavigationExtras = {
    queryParams: { 'session_id': '123' },
    fragment: 'anchor'
    };
    this.router.navigate(['/news'],navigationExtras);
}

獲取跳轉過來的頁面接受傳過來的值

constructor(private route: ActivatedRoute) {
   console.log(this.route.queryParams);
}