首页 > 其他 > 详细

19跳转的方式

时间:2020-01-20 17:58:47      阅读:70      评论:0      收藏:0      [点我收藏+]

1,可以通过Router类对应的对象中的navigateUrl()

2,也可以通过Router类对应的对象中的navigate方法实现跳转,参数是一个数组,第一个元          素是path,第二个参数是要传递的参数

  this.myRouter.navigate ( [ path, argument ] ) ;

     跳转:this.myRouter.navigate( [ ‘/check‘ ] );

  传参:this.myRouter.navigate( [ ‘/check‘, { id=10 } ] )

       通过navigate进行传参,相比navigateUrl少了一步,无需再给接收方配置路由地址

   技术分享图片

   技术分享图片

   技术分享图片

 

 

 

navigate练习

demo15/

demo15/login.component.ts,dashboard.component.ts;

在login,有一个button,有一个超链接,一个输入框,点击上述button或者超链接 跳转到 dashboard,dashboard接收并显示在 h1 的标签中

①先实现跳转到dashboard (button 和 超链接)

②监听用户输入,把用户输入的值打印出来

③用一个变量保存用户输入的值,然后跳转到dashboard的navigate中,作为参数传递到dashboard页面中

④在dashboard页面中将这个值渲染出来

 技术分享图片

 技术分享图片

 技术分享图片

 

  技术分享图片

 

 

  ⑤超链接跳转并且传参

    技术分享图片

 

 

 

总结:

  传参有两种方案:

  方案一:需要配置接收方路由地址

    { path : "dashboard" } ---> { path : "dashboard: /uName=zhangsan"}

    ①navigateByUrl ( ‘dashboard / zhangsan‘ )

    ②routerLink="dashboard/zhangsan"

  方案二:不需要配置

    ①navigate( " [ ‘ dashboard‘ , {uName : ‘zhangsan‘}  ]" )

    ②[ routerLink ] = " [‘/dashboard‘,{ uName : ‘zhangsan‘}] "

19跳转的方式

原文:https://www.cnblogs.com/shanlu0000/p/12218515.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!