angular路由小结

前端之家收集整理的这篇文章主要介绍了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片段,获取的参数以及解析出的数据。

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

猜你在找的Angularjs相关文章