zoukankan      html  css  js  c++  java
  • Angular5 路由传参的3种方法

      一共3种方法。

      1.问号后面带的参数,获取参数的方式:ActivatedRoute.queryParams[id]

            例如:/product?id=1&name=iphone还可以是: [routerLink]="['/books']" [queryParams]="{bookname:'《活着》'}

    代码:html

    <h4>Messages</h4>
    <p>Total:{{msgs.total}}</p>
    <div *ngFor="let item of msgs.data">
      <b>{{item.name}}</b>:
      <a [routerLink]="['/next',item.id]"  [queryParams]="{id:item.id, msg:item.msg, name:item.name}">{{item.msg}}</a>
      <a routerLink="/final">Reply</a><p></p>
    </div>
    

      获取参数js

    ngOnInit() {
        let obj = this.route.queryParams["_value"];
        console.log(obj);
    }
    

      2.冒号形式,

            例如:path:/product/:id

            获取参数的方式:ActivatedRoute.params[id]

    上边html代码中第一个routelink就是。

    另外需配置路由

    {
        path:'listDetail/:id',
        component:ListDetailComponent
      }
    参考https://segmentfault.com/a/1190000012268186

      3.js里的路径跳转

            例如:path:/product,component:ProductComponent,data:[{madeInChina:true}]} 

            获取参数的方式: ActivatedRoute.snapshot.data[0][madeInChina]

    FIGHTING
  • 相关阅读:
    Lc5413_重新排列句子中的单词
    Lc5412._在既定时间做作业的学生人数
    Lc520_检测大写字母
    threadPoolExecutor的参数和拒绝策略
    coutdownlatch的使用
    volatile的个人理解
    Lc292_Nim 游戏
    Lc136_只出现一次的数字
    lc88_合并两个有序数组
    jdk源码_String(1)
  • 原文地址:https://www.cnblogs.com/ljwsyt/p/8966734.html
Copyright © 2011-2022 走看看