Angular:路由参数传递
发布时间:2020-12-17 08:45:19 所属栏目:安全 来源:网络整理
导读:路由参数传递 查询参数时传递数据 首先设置查询参数 a [routerLink] = "['/stock']" [queryParams] = "{id:1}"股票/a queryParams是什么鬼 然后在跳转组件中设置ActivatedRoute,包含当前路由对象的信息 export class StockComponent implements OnInit { pr
路由参数传递查询参数时传递数据首先设置查询参数 <a [routerLink] = "['/stock']" [queryParams] = "{id:1}">股票</a> queryParams是什么鬼 然后在跳转组件中设置ActivatedRoute,包含当前路由对象的信息 export class StockComponent implements OnInit { private stockID:number; constructor(private routeInfo:ActivatedRoute) { } ngOnInit() { this.stockID = this.routeInfo.snapshot.queryParams["id"]; } } 路由路径中传递数据首先在path中设置: const routes: Routes = [ {path:"",component:HomeComponent},{path:"stock/:id",component:StockComponent},{path:"**",component:Err404Component} ]; 然后在对象的链接中设置具体的参数值: <a [routerLink] = "['/stock',1]">股票</a> 最后在控制中:把queryParams改为params ngOnInit() { this.stockID = this.routeInfo.snapshot.params["id"]; } 参数快照 this.stockID = this.routeInfo.snapshot.params["id"]; 参数订阅 this.routeInfo.params.subscribe((params:Params)=>this.stockID = params["id"]); 参数订阅解决了在同一页面,参数不变的问题。 路由配置中传递数据这个是基于data的 {path:"stock/:id",component:StockComponent,data:[{isPro:true}]}, data是一个数组,里面可以放置多个对象 最后通过ActivatedRoute获取 this.isPro = this.routeInfo.snapshot.data[0].isPro; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |