angular路由小结

RouterStateSnapshot

它是个接口
内有一个属性 url 和 一个方法 toString();

interface RouterStateSnapshot extends Tree { 
  url: string
  toString(): string
}

描述：

RouterStateSnapshot is a tree of activated route snapshots. Every node in this tree knows about the “consumed” URL segments,the extracted parameters,and the resolved data.

consume

英文翻译过来为“消费”，但是在it领域，应翻译为“调用，应用”，后跟 in 或 with。
举例：
例句一：How to consume JSON array in AngularJS?
例句二：How To Consume Restful APIs with ngResource
例句三：How to Consume a Web API Using Angular

RouterStateSnapshot是一个树结构，表示当前激活路由的快照。当前节点下的所有子节点都包含了当前URL片段，获取的参数以及解析出的数据。

NavigationExtras

queryParams : Params设置URL的查询参数
// Navigate to /results?page=1
this.router.navigate(['/results'],{ queryParams: { page: 1 } });
fragment : string 设置URL的has片段
// Navigate to /results#top
this.router.navigate(['/results'],{ fragment: 'top' });
preserveQueryParams : boolean 将查询参数带到下一个导航
// Preserve query params from /results?page=1 to /view?page=1
this.router.navigate(['/view'],{ preserveQueryParams: true });
preserveFragment : boolean 将片段带到下一个导航
// Preserve fragment from /results#top to /view#top
this.router.navigate(['/view'],{ preserveFragment: true });
skipLocationChange : boolean 导航时不向history中添加记录
// Navigate silently to /view
this.router.navigate(['/view'],{ skipLocationChange: true });
replaceUrl : boolean 替换当前状态在history中的记录值
// Navigate to /view
this.router.navigate(['/view'],{ replaceUrl: true });

ActivatedRoute示例
讲的非常好
https://www.kancloud.cn/wujie520303/angular2_note/240218
https://www.kancloud.cn/wujie520303/angular2_note/246437

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!