文档章节

【Angular】Angular4路由的改变

我是钟钟
 我是钟钟
发布于 2017/08/25 10:35
字数 362
阅读 263
收藏 1

原文地址:https://yakovfain.com/2017/03/26/angular-4-changes-in-the-router/

Angular4在路由中有一些有用的更改。我们来看一下在路由的CanDeactivete中接收参数的变化。(看<a href="https://yakovfain.com/2016/07/20/angular-2-guarding-routes/" terget="_blank">这里</a>)

路由可以使用ActivatedRoute的快照属性或通过订阅其属性参数来接收参数。现在有一个属性paramMap,可以通过使用get()方法获取一个特定的参数,或者通过调用getAll()获取所有的参数。

以下是接收上一个路由中没有更改的参数ID的方法:

export class ProductDetailComponentParam {
  productID: string;
 
  constructor(route: ActivatedRoute) {
    this.productID = route.snapshot.paramMap.get('id');
  }
}

如果路由在上一个路由中已经更改了,(看<a href="https://yakovfain.com/2016/11/20/angular-2-implementing-master-detail-using-router/" target="_blank">这里</a>)你可以像下面这样订阅id的流:

export class ProductDetailComponentParam {
  productID: string;
 
  constructor(route: ActivatedRoute) {
 
    route.paramMap.subscribe(
     params => this.productID = params.get('id')
     );
  }
}

CanDeactivate守卫现在允许您更具体,有条件地禁止从路由导航,具体取决于用户计划导航的位置。接口CanDeactivate现在有一个可选参数nextState,您可以检查以决定是否要禁止导航。下一个代码片段只显示用户尝试导航到由路径“/”表示的归属路由时,显示警告弹出窗口。导航到任何其他路线仍然没有保护。

@Injectable()
export class UnsavedChangesGuard implements CanDeactivate<ProductDetailComponent>{
 
    constructor(private _router:Router){}
 
    canDeactivate(component: ProductDetailComponent, 
                  currentRoute: ActivatedRouteSnapshot,
                  currentState: RouterStateSnapshot, 
                  nextState?: RouterStateSnapshot){
 
        let canLeave: boolean = true;
 
        // If the user wants to go to home component
        if (nextState.url === '/') {
          canLeave = window.confirm("You have unsaved changes. Still want to go home?");
        }
        return canLeave;
 
    }
}

© 著作权归作者所有

下一篇: nginx配置http2
我是钟钟

我是钟钟

粉丝 52
博文 43
码字总数 40311
作品 1
深圳
高级程序员
私信 提问
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
2018/06/02
0
0
Angular4 计划3月22日正式发布,Angular5 也要来了!

Angular 4 正式版的发布已进入倒计时,据开发团队放出的更新计划表显示,Angular4 将于2017年3月22日发布。 Google 对 Angular4 的目标是尽可能与 Angular2 向后兼容,并改善编译器错误消息。...

王练
2017/03/14
5.7K
10
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0
angular5 angular4 angular2 登录 路由守卫 登录验证 登录实例 实例 session验证 非token方式

找了半天,网上都没有这样的资料和文章。 angular4 angular2怎么做登录验证,angular身份认证。 用法,懂得router的用法,路由守卫的用法,然后在 路由守卫按照下面的逻辑编写,就跟以往ses...

安浪
2017/10/31
0
0
Angular4发布以及与React的深度对比

前景 Angular 就在2017年的3月,Angular已经发布了4.0的版本(兼容2.x版本),关于为什么是4.0,官方的解释是因为Router这个主要核心组件的版本已经是4.0.0,如果Angular还用3.0会引起混淆,...

葡萄城技术团队
2017/05/02
351
0

没有更多内容

加载失败,请刷新页面

加载更多

MySql双主架构原理

在企业中,一般系统架构的瓶颈会出现在数据库这一部分,mysql主从架构在很大程度上解决了这部分瓶颈,但是在mysql主从同步的架构也存在很多问题;比如:1.关于数据写入部分(也就是主库)往往很难做...

xiaomin0322
12分钟前
0
0
分布式系统中一致性哈希

问题场景 近年来B2C、O2O等商业概念的提出和移动端的发展,使得分布式系统流行了起来。分布式系统相对于单系统,解决了流量大、系统高可用和高容错等问题。功能强大也意味着实现起来需要更多...

Java领航员
13分钟前
0
0
接口限流算法:漏桶算法和令牌桶算法

漏桶算法 漏桶可以看作是一个带有常量服务时间的单服务器队列,如果漏桶(包缓存)溢出,那么数据包会被丢弃。这一点和线程池原理是很相似的。 把请求比作是水,水来了都先放进桶里,并以限定...

铁骨铮铮
20分钟前
1
0
Android 生成二维码工具类

/** * 生成条形码和二维码的工具 */public class ZXingUtils { /** * 生成二维码 要转换的地址或字符串,可以是中文 * * @param url * @param width ...

lanyu96
25分钟前
1
0
谈谈lucene的DocValues特性之SortedNumericDocValuesField

前面已经介绍过NumericDocValuesField,这里想强调一下SortedNumericDocValuesField是针对同一篇文档中一键多值的情况进行排序的,换句话说不同文档的同一字段值可以乱序。核心的写入流程与谈...

FAT_mt
33分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部