zoukankan      html  css  js  c++  java
  • Angular跳转传值(get,动态路由,js)

    一,get传值

     

    <ul *ngFor="let l of list;let ss=index;">
        <li><a routerLink="/newsDetail" [queryParams]="{aid:l.id}">{{l.content}}</a></li>
    
    </ul>

    接收

    import { ActivatedRoute } from '@angular/router';
    
    constructor(public router:ActivatedRoute) { }
    
    //get获取传值
     this.router.queryParams.subscribe((data)=>{
       console.log(data)
     })

     二,动态路由传值

    配置

    {
        path:'newsDetail/:id',component:NewDetailComponent
      }

    跳转

    <ul *ngFor="let l of list;let ss=index;">
    
      <li><a [routerLink]="['/newsDetail',l.id]">{{l.content}}</a></li>
    </ul>

    接收

    
    
    import { ActivatedRoute } from '@angular/router';
    
    constructor(public router:ActivatedRoute) { }

    //
    动态路由 this.router.params.subscribe((data)=>{ console.log(data) this.id=data.id; })

     三、动态路由的js跳转

    1, 引入

    import { Router } from '@angular/router';

    2.初始化

    export class HomeComponent implements OnInit {
         constructor(private router: Router) {}
    }

    跳转

    <button (click)="goHome()">goHome</button>
    import { Router } from '@angular/router';
    
        //js跳转
      goHome(){
        //传值
        //this.router.navigate(['/home','1'])
    
        //不传值
        this.router.navigate(['/home'])
      }

    四,js get传值

    <button (click)="goGetHeader()">goGetHeader</button>
    import { Router,NavigationExtras } from '@angular/router';
    
    constructor(public router:Router) { }
    
      goGetHeader(){
        let queryParams:NavigationExtras={
          queryParams:{'id':12}
        }
    
        this.router.navigate(['/header'],queryParams)
    
      }
  • 相关阅读:
    JMeter性能测试中控制业务比例
    软件版本命名规范
    软件测试方法——静态测试与动态测试
    安装BugFree 3.0.4时出现的问题
    Linux下给mysql创建用户分配权限
    LoadRunner 测试脚本
    linux dd命令详解
    Linux查看CPU和内存使用情况
    Error:java: 无效的源发行版: 10
    rf接口自动化之结果校验
  • 原文地址:https://www.cnblogs.com/zhulei2/p/13252051.html
Copyright © 2011-2022 走看看