zoukankan      html  css  js  c++  java
  • angular路由详解三(路由参数传递)

    我们经常用路由传递参数,路由主要有三种方式:

    第一种:在查询参数中传递数据

    {path:"address/:id"}   => address/1  => ActivatedRoute.param[id]

      在路由中传递

      <a [routerLink] = "['/address',1]"></a>

      点击事件传递

      this.router.navigate([‘/address’,2])

      //在不同等级页面跳转可以用snapshot(快照方式)

      this.id = this.routeInfo.snapshot.params["id"]

      //相同组件跳转需要使用subscribe(订阅方式)

       this.routeInfo.params.subscribe((params: Params) => this.id = params["id"]  )

    第二种:在路由路径中传递参数数据

    <a [routerLink] = "['/address']" queryParams= "{id:1}"></a>
    this.id = this.routeInfo.snapshot.queryParams["id"]//拿到路由中的参数
     
    第三种:在路由配置中传递数据
    {path:'home', component: HomeComponent,data:[{isPush:true}] }  => ActivatedRoute.data[0][isPush]
      //同样也是有snapshot和subscribe两种类型
      this.isPush = this.routeInfo.snapshot.data[0]["isPush"]
     
     如果有用请支持,谢谢!
     
     
     
    每一步都是一个深刻的脚印
  • 相关阅读:
    30天自制操作系统之-第四天-
    30天自制操作系统之-第三天-
    30天自制操作系统之-第二天-
    30天自制操作系统之-第一天-
    c语言之连接符
    c语言之函数指针应用
    dpdk之路-环境部署
    linux系统裁剪
    redux和mobx比较(二)
    redux和mobx比较(一)
  • 原文地址:https://www.cnblogs.com/chzlh/p/7718064.html
Copyright © 2011-2022 走看看