angular中路由跳转并传值

2019-06-28 18:39:11 阅读：170 来源： 互联网

标签：步骤 route 传值跳转 router 接收 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',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);
}

标签：步骤,route,传值,跳转,router,接收,angular,路由
来源： https://www.cnblogs.com/yangxuanxuan/p/11104263.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

angular中路由跳转并传值