zoukankan      html  css  js  c++  java
  • --藏经阁-01-关于Angular中的路由传值--

    --藏经阁-01-关于Angular中的路由传值--


    转载一篇文章,原文章在此:原文出处

    一、路由传值

    步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2&name=xiaoming

    <div class="z-shebei-box1 x-mysh-p"  style=" 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=" 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);
    }
    
    离大侠再近一步!
  • 相关阅读:
    [SSRS] Use Enum values in filter expressions Dynamics 365 Finance and Operation
    Power shell deploy all SSRS report d365 FO
    display method in Dynamics 365 FO
    How To Debug Dynamics 365 Finance and Operation
    Computed columns and virtual fields in data entities Dynamics 365
    Azure DevOps for Power Platform Build Pipeline
    Create readonly entities that expose financial dimensions Dynamics 365
    Dataentity call stack dynamics 365
    Dynamics 365 FO extension
    Use singletenant servertoserver authentication PowerApps
  • 原文地址:https://www.cnblogs.com/Samo-Li/p/13722790.html
Copyright © 2011-2022 走看看