angular router拾遗

RouterLink指令与纯html定义超链接的区别在于,angular通过以下两个步骤来保证不重载刷新加载应用的情况下完成跳转。

在click事件中调用preventDefault()方法来禁止单机<a>标签后向服务器发送请求的行为,从而避免了跳转加载。

调用Router.navigateByUrl()方法来启动跳转流程。

RouterLink指令的另一个强大之处在于它可以被应用在任何HTML元素上,使得页面跳转不需要依赖超链接。

当RouterLink被激活时,还可以通过RouterLinkActive指令为其相应地HTML元素指定CSS类。routerLinkActive="active"。

假定当前URL在同一页面内跳转,不会创建组件的实例,所以组件的构造函数和ngOnint()方法都没有被调用到。虽然Angular会将快照中参数Id的值更新。但没有将这个更新通知到组件。为了解决这个问题,ActivatedRoute服务提供了一个Observable对象,允许对参数的更新进行订阅。

我们也可以通过解析URL的query部分来获取参数值。由于URL的query部分不用于和配置项进行匹配,因为每一个配置项可以拥有任意多个查询参数。

CanDeactivate。在通讯录例子的编辑页面中,当用户单击取消按钮时,可以通过在CanDeactivate拦截中判断联系人信息是否被修改且未保存是否允许离开编辑页。使用CanDeactivate拦截的用法可分为三步 :首先,通过实现CanDeactivate接口创建拦截服务。该接口只包含了一个canDeactivate()方法,该方法除了第一个参数为目标配置项对应组件的实例外,其余使用方式与canActivate()方法一样。

posted @ 2017-09-06 13:41  艾路  阅读(200)  评论(0编辑  收藏  举报