发表于: 2017-05-29 22:12:20
1 978
今天完成的事情
今天看了路由的query参数和matrix参数部分。但是没有想到后面还有子路由和附属outlet、路由拦截数据预加载拦截激活拦截和反激活拦截、模块的延时加载。。。这章今天是看不完了
明天计划的事情
剩下的部分暂时先不看了,等用到的时候再看吧,明天先写一写路由部分。
遇到的问题
其实还是不是很清楚路由的各个部分参数都可以用来做什么。参数的意义在哪里。
收获
query参数http;//localhost;3000/list?limit=5
其实中的limit=5就是query参数,与path参数类似,query参与可以通过routerlink指令或者跳转方法来赋值;
<a [routerlink]="['/list']' [queryparams]="{limits;5}">this.router.navigate(['/list'],{queryParams: {'limit: 5'}});this.router.navigateByUrl('list?limit=5');
注意的是,navigate方法中query参数是以一个对象的方式传递进去的,而navigareByUrl方法则是以url的方式直接传递进去的。
和同页跳转的path参数一样,query参数的获取需要借助于ActivedRoute服务提供的Observable类型对象QueryParams来完成:
//list.component.tsimport { ActivedRoute } from '@angular/router';export class ListComponent implements OnInit, Ondestroy {contact: any[];private limit: number;private sub: any;constructor(private activedRoute: ActivedRoute) {}ngOnInit () {this.getContact();}ngOnDestroy() {this.sub.unsubscribe();}getContacts() {this.sub = this.activedRoute.queryParams.subscribe(params => { //这个是由ActivedRoute提供的一个流,我们只需要订阅就可以了。this.limit = parseInt(params['limis']);if(this.limit) {this.contacts.splice(this.limit);}});}}
评论