一、路由传值
步骤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);
}
步骤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);
}
