一、路由傳值
步驟1 路由傳遞參數 注意 一定是要傳遞 索引值 let key = index 這種情況是在浏覽器中可以顯示對應的參數 這種的是問号 localhost:8080/news?id=2&name=xiaoming
<div class="z-shebei-box1 x-mysh-p" style="width: 100%;" *ngFor='let item of deviceInfo.list ;let key = index;'>
<a [routerLink]="['/devicepay']" [queryParams]="{id:key}">
<ul>
<li>{{item}}</li>
</ul>
</a>
</div>
步驟2 接收傳過來的參數 注意:接收時通過 queryParams 進行接收
首先:引入 import {ActivatedRoute} from '@angular/router'
再:聲明:constructor(public route:ActivatedRoute) { }
接收: // 接收傳過來的值
this.route.queryParams.subscribe((res)=>{
console.log(res)
})
二、動态路由傳值這種情況是在浏覽器中可以顯示對應的參數 這種的是斜杆 localhost:8080/news/id=2&name=xiaoming
步驟1 在路由中進行配置
{ path: 'devicepay/:id',component:DevicepayComponent},
步驟2 在html界面中進行跳轉
<div class="z-shebei-box1 x-mysh-p" style="width: 100%;" *ngFor='let item of deviceInfo.list ;let key = index;'>
<a [routerLink]="['/devicepay/',key]">
<ul>
<li>{{item}}</li>
</ul>
</a>
</div>
步驟3 在另一界面中接收傳過來的參數 注意 :動态路由接收時使用的是 params
引入 import {ActivatedRoute} from '@angular/router'
再:聲明:constructor(public route:ActivatedRoute) { }
接收: // 接收傳過來的值
this.route.params.subscribe((res)=>{
console.log(res)
})
三、動态js進行跳轉 主要在方法對象中使用
步驟1 html 中 注意裡面傳入的key值是 循環中 擷取的索引值
<button (click)='gotoDevicePay(key)'>跳轉到支付界面</button>
步驟2 路由檔案中寫入的格式如下
{ path: 'devicepay',component:DevicepayComponent},
步驟3 js中 進行路由跳轉
//先引入
import { Router} from '@angular/router'
//再聲明
constructor( public router:Router) { }
//定義點選事件
gotoDevicePay(key):void{
//跳轉路徑 實作的是動态跳轉資料
this.router.navigate(['/devicepay/'],{queryParams:{id:key}})
}
四、通過get方式可以傳入多個參數到下一界面
步驟1 引入 NavigationExtras
import { Router ,NavigationExtras} from '@angular/router';
步驟2. 定義一個 goNewsContent 方法執行跳轉 , 用 NavigationExtras
goNewsContent(){
let navigationExtras: NavigationExtras = {
queryParams: { 'session_id': '123' },
fragment: 'anchor'
};
this.router.navigate(['/news'],navigationExtras);
}
步驟3. 擷取 傳過來的值
constructor(private route: ActivatedRoute) {
console.log(this.route.queryParams);
}
<div class="z-shebei-box1 x-mysh-p" style="width: 100%;" *ngFor='let item of deviceInfo.list ;let key = index;'>
<a [routerLink]="['/devicepay']" [queryParams]="{id:key}">
<ul>
<li>{{item}}</li>
</ul>
</a>
</div>
首先:引入 import {ActivatedRoute} from '@angular/router'
再:聲明:constructor(public route:ActivatedRoute) { }
接收: // 接收傳過來的值
this.route.queryParams.subscribe((res)=>{
console.log(res)
})
{ path: 'devicepay/:id',component:DevicepayComponent},
<div class="z-shebei-box1 x-mysh-p" style="width: 100%;" *ngFor='let item of deviceInfo.list ;let key = index;'>
<a [routerLink]="['/devicepay/',key]">
<ul>
<li>{{item}}</li>
</ul>
</a>
</div>
引入 import {ActivatedRoute} from '@angular/router'
再:聲明:constructor(public route:ActivatedRoute) { }
接收: // 接收傳過來的值
this.route.params.subscribe((res)=>{
console.log(res)
})
<button (click)='gotoDevicePay(key)'>跳轉到支付界面</button>
{ path: 'devicepay',component:DevicepayComponent},
//先引入
import { Router} from '@angular/router'
//再聲明
constructor( public router:Router) { }
//定義點選事件
gotoDevicePay(key):void{
//跳轉路徑 實作的是動态跳轉資料
this.router.navigate(['/devicepay/'],{queryParams:{id:key}})
}
import { Router ,NavigationExtras} from '@angular/router';
goNewsContent(){
let navigationExtras: NavigationExtras = {
queryParams: { 'session_id': '123' },
fragment: 'anchor'
};
this.router.navigate(['/news'],navigationExtras);
}
constructor(private route: ActivatedRoute) {
console.log(this.route.queryParams);
}