angular中路由跳转并传值
?
一、路由传值 ? 步骤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‘, ? 步骤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); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |