ActivatedRoute 路由参数
当前激活的路由对象,保存这当前路由的信息,如路由地址,路由参数等。
三种传参方式
在查询参数中传递数据 =>
html形式如:<a [routerLink]="['/stocks']" [queryParams]="{id:1}">股票信息</a>
url形式如:/product?id=1&name=2
获取参数格式:ActivatedRoute.snapshot.queryParams["id"]
和ActivatedRoute.queryParams["name"]
在路由路径中传递数据 =>
routes中配置:{path:'/product/:id'}
html 形式如:<a [routerLink]="['/stocks','1']">股票信息</a>
url形式如:/product/1
获取参数格式:ActivatedRoute.snapshot.params["id"]
在路由配置中传递数据 =>
routes中配置:{path:'stocks',component:StocksComponent,data:[{ispro:true}]}
获取参数格式:ActivatedRoute.data[0]["ispro"]
一、demo展示
html:
<a [routerLink]="['/stocks']" [queryParams]="{id:1}">在查询参数中传递,增加queryParams属性</a>
<a [routerLink]="['/stocks','1']" >在路由路径中传递,根据配置的path值改变</a>
<a [routerLink]="['/stocks']" >在路由配置中传递,无变化</a>
routes配置:
// 第一种,查询参数,无改变
{path:'stocks',component:StocksComponent}
// 第二种,路由参数,改变path
{path:'stocks/:id',component:StocksComponent}
// 第三种,路由配置,增加data属性
{path:'stocks',component:StocksComponent,data:[{ispro:true}]}
控制器逻辑 ts:
export class StocksComponent implements OnInit {
private stockId:boolean;
//注入ActivatedRoute服务
constructor(private routerInfo:ActivatedRoute) { }
ngOnInit() {
//查询参数中传递获取值
this.stockId = this.routerInfo.snapshot.queryParams["id"];
//路由路径参数中传递获取值
this.stockId = this.routerInfo.snapshot.params["id"];
//路由配置中传递获取值
this.stockId = this.routerInfo.snapshot.data[0]["ispro"];
}
}
二、snapshot和subscribe的区别
使用snapshot
this.stockId = this.routerInfo.snapshot.params["id"];
使用subscribe
this.routerInfo.params.subscribe((params:Params)=>this.stockId = params["id"] );
//每当params:Params值发生变化时,(params:Params)=>this.stockId = params["id"]都会被调用一次
当组件从自身路由到自身时,选择用subscribe方式,否则使用snapshot方式节约资源。
嵌套路由
在父级路由的组件里,访问子路由的routerLink
- 子路由可以无限极嵌套
- 路由信息和组件是分离的,路由信息在模块上配置,与组件并不相粘合
1.在路由配置中增加children属性,父路由是stocks,子路由有两个
{path:'stocks/:id',component:StocksComponent,children:[
{path:'',component:BuyerListComponent},
{path:'saller/:id',component:SallerListComponent}
]
}
2.子组件中写明routerLink和router-outlet
<div>
<span>下面是嵌套路由信息</span>
<a [routerLink]="['./']">(默认空路径时)展示买家信息</a>
<a [routerLink]="['./saller']">展示卖家信息</a>
<router-outlet></router-outlet>
</div>
Tips:
子路由[routerLink]的值为 ./path,表示在当前主路由下找名称为path的子路由
不管嵌套多少级,子路由的[routerLink]的值写法都为 ./path
不用滞留采花保存,只管往前走去,一路上百花自会盛开。 ——泰戈尔