美文网首页
angular2路由传递数据

angular2路由传递数据

作者: 月落乌啼霜满天_1f0f | 来源:发表于2019-03-10 17:32 被阅读0次

两种方法:navigateByUrl navigate
一。准备工作:引入 import { Router } from '@angular/router';Router模块,constructor(private router: Router) { }
两个方法传递参数不一样:
<1>navigateByUrl this.router.navigateByUrl("share?name=我是a页面传递的A");问号前是路由的地址,后面是传的数据。接收:
<1.1>在接收页面引入import { ActivatedRoute } from '@angular/router';
<1.2>constructor(private router: Router, public route: ActivatedRoute) { }
<1.3>在ngOnlnit生命周期钩子里面调用 不一定要在这个钩子里面写,看需求。ngOnInit() { this.route.queryParams.subscribe(params => { this.sub = params["name"]; }); }
<2>navigate this.router.navigate(["share"], {queryParams:{name: "我是b页面传递的B"}})
路由地址由方括号括起来,后面是传的数据接受和上面一样

相关文章

  • angular2路由传递数据

    两种方法:navigateByUrl navigate一。准备工作:引入 import { Router } fr...

  • Angular路由传递参数的3种方式

    路由时传递数据的方式: 在查询参数中传递 在路由路径中传递 使用snapshot快照的方式传递数据,因为初始化一次...

  • 2020-02-14

    路由传递数据: *params的方式: 配置路由格式: /router/:id 传递的方式:在path后面...

  • angular2路由切换改变页面title

    angular2里默认切换路由或者切换组件,页面的title是不会变化的。 angular2在路由设置里提供了da...

  • 2.在路由时传递数据

    三种方法 1.查询参数中传递数据 2.在路由的路径中传递数据(在定义路由路径时指定参数名字,实际路径携带参数,路由...

  • Vue组件间数据传递

    前言 总结vue组件间的数据传递 路由传参 父组件传递数据给子组件---props 子组件传递数据给父组件---$...

  • 25.路由中数据传递的两种方式

    路由中数据传递的两种方式:params和query。 params传递数据前面已经说过了,下面主要说一下query...

  • angular2:路由参数的传递和接收

    首先回顾一下如何配置路由: import { RouterModule } from '@angular/rout...

  • angular跳转页面和传递参数

    比如你想从 testA 跳转到 testB页面,并传递数据;首先写好路由,再testB加上params,作为传递参...

  • angular 路由传值

    angualr版本: 在路由传参时有三种方式: 一:在查询参数中传递数据,例如: 传递:/product?id=1...

网友评论

      本文标题:angular2路由传递数据

      本文链接:https://www.haomeiwen.com/subject/achppqtx.html