z.cn/wangzhan/weihu/"> 网站运营维护

  • 案例

  • 方案

    网站方案

    Solution

  • 电商网站开发

    电商网站开发

    E-commerce & System

    定制化电子商务系统 产品商城网站建设方案 移动手机电商网站解决方案 微信会员电商解决方案
    系统开发 P2P金融平台 产品众筹平台 股权众筹平台

  • 微信小程序

  • 我们

    我们

    About Us

    了解我们
    关于快上网
    实力认可
    快上网与众不同
    理念与信仰
    售后支持
    我们的客户
    客户列表
    客户评价

  • 联系

    联系

    Contact Us

    联系我们
    业务热线： 028-86922220
    邮箱： service@cdxwcx.com
    人才招聘
    HR电话：
    13518219792
    • 资讯

    精准传达 • 有效沟通

    从品牌网站建设到网络营销策划，从策略到执行的一站式服务

    网站建设 >

    查看其它板块

    Angular5路由传值方式有哪些

    这篇文章给大家分享的是有关Angular5路由传值方式有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

    铅山ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

    目前Angular已经升级到了稳定版本Angular5,这次升级更小更快以及更稳定!路由可以说是Angular甚至是单页应用的核心部分了吧!在angularjs中的路由最大的缺点就是无法嵌套路由,在Angular中解决了这个问题!在Angular中路由不仅仅是页面跳转,其中还有一项叫英雄列表跳转英雄详情!在诸多的列表,不可能给每个英雄做一个详情页,于是乎路由参数起到作用了!通过路由传入参数识别那个英雄的详情!

    现在对于路由传值进行详解,首先一种方式是官网的导航到详情的单值id传入,另一种是多数据传入!

    1.单值传入

    ['/hero', hero.id]
     
  
   
    {{ hero.id }}{{ hero.name }}
   
  
 

    以上是官网示例

    下面我们用我自己的示例介绍一下:

    首先是列表页,以及跳转方式

    {{item.name}}

    然后是配置路由:(单值传入的方式需要在详情组件路由配置)

    {
  path:'listDetail/:id',
  component:ListDetailComponent
 },

    传入后就是取到参数,在详情组件的ngOnInit生命周期获取参数

     ngOnInit() {
  this.route.params
   .subscribe((params: Params) => {
    this.id = params['id'];
    console.log(this.id);
    console.log('传值');
    console.log(params)
   })
 }

    2.我们在平时的复杂的业务场景我们需要传多个数据,这时候该怎么办呢?这时候我们就用到了queryParams

    {{data.name}}

    这里数据我是直接拿上去的,同样你可以组织好数据,一个参数放上去,简化html结构,现在有个问题,这样多值传入路由参数怎么配置呢?/:id/:id???我这个参数多少也不是固定的咋办?其实这种方式不需要配置路由!你只需要传入和取到数据就可以了!

     ngOnInit() {
  this.route.queryParams
   .subscribe((params: Params) => {
    this.id = params['id'];
    this.state = params['state'];
    console.log(params)
    console.log(this.id);
    console.log(this.state);

   })
 }

    感谢各位的阅读！关于“Angular5路由传值方式有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


    网页标题：Angular5路由传值方式有哪些
    网站地址：http://cdkjz.cn/article/jcipci.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    网站解决方案橡塑保温板重庆教育培训网站建设成都做网站乐山电信机房温江做网站成都服务器运维中晴建设成都商城网站建设公司成都移动主机托管

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图