路由传值

来源:互联网 发布:mac南瓜色口红是几号 编辑:程序博客网 时间:2024/06/06 19:09

路由传递参数

写法

<a [routerLink]="['/']" [queryParams]="{id:1}">主页</a><!--  使用查询 参数  [queryParams]={} 传递数据-->

url

http://127.0.0.1:4200/?id=1

取值

this.activatedRoute.snapshot.queryParams['id']

路由路径中传递参数

 {path: 'product/:id', component: ProductComponent},  /**   * 修改路由 使其可以携带参数   */
<a [routerLink]="['/product',1]">商品详情</a>this.route.navigate(['/product', 2]);link  值的数组中 填充要传递的值

url

http://127.0.0.1:4200/product/1

取值

 this.activatedRoute.snapshot.params['id'];  ```## 参数订阅 使用镜像时只创建一次  但是使用订阅的时候是创建一个订阅对象,当观察对象状态发生改变的时候订阅者接受改变的值

this.activatedRoute.params.subscribe((p: Params) => console.log(p[‘id’]));

> 路由配置中传递数据

使用data 参数定义静态的对象 配置静态数据

获取数据 this.activatedRoute.data.forEach(x => console.log(x));

可能存在与 在路由路径中传递参数冲突
“`

原创粉丝点击