首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

$rootScope.$on('$stateChangeStart',..)的等价物是什么?在用于Angular 2的ui-router中?

在Angular 2中使用ui-router时,$rootScope.$on('$stateChangeStart',..)的等价物是使用@HostListener装饰器来监听路由变化的事件。@HostListener装饰器是Angular提供的一种装饰器,用于在组件中监听DOM事件或宿主元素事件。

在Angular 2中,可以在组件类中使用@HostListener装饰器来监听路由变化事件。具体使用方式如下:

  1. 首先,在组件类中导入@HostListener装饰器:import { HostListener } from '@angular/core';
  2. 然后,在组件类中使用@HostListener装饰器来监听路由变化事件:@HostListener('window:popstate', ['$event']) onPopState(event: any) { // 处理路由变化事件的逻辑 }

在上述代码中,'window:popstate'表示要监听窗口的popstate事件,即路由变化事件。当路由变化时,onPopState方法会被触发,可以在该方法中编写处理路由变化事件的逻辑。

需要注意的是,@HostListener装饰器中的第一个参数可以是任何有效的DOM事件,用于指定要监听的事件类型。在这里,我们使用'window:popstate'来监听路由变化事件。

关于Angular 2的ui-router,腾讯云提供了一个相关产品和产品介绍链接地址,您可以参考该链接获取更多关于Angular 2的ui-router的信息:腾讯云产品和产品介绍链接地址

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【ionic+angularjs】angularjs ui-router路由简介($urlRouter、$state、$stateProvider、ui-sref....)

之前有写过一篇关于Angular自带路由:ngRoute。今天来说说Angular第三方路由:ui-router。...那么有人就会问:为什么Angular有了自带路由,我们还需要用ui-router呢?...这里简单明了说明下ngRoute和ui-router区别吧,其实也没很大区别,主要就是ngRoute针对于单视图,而ui-router用于多视图(这里说视图是指在页面内我们可控制,可变化区域...$stateProvider 处理路由状态服务,路由状态反映了该项应用程序位置,描述了在当前状态下UI是应该怎么样,并且该做什么。...ngRouteresolve选项可以允许开发者路由到达前载入数据保证(promises)。使用这个选项时比使用angular-route有更大自由度。

7.3K40

【转载】【ionic+angularjs】angularjs ui-router路由简介

之前有写过一篇关于Angular自带路由:ngRoute。今天来说说Angular第三方路由:ui-router。...那么有人就会问:为什么Angular有了自带路由,我们还需要用ui-router呢?...这里简单明了说明下ngRoute和ui-router区别吧,其实也没很大区别,主要就是ngRoute针对于单视图,而ui-router用于多视图(这里说视图是指在页面内我们可控制,可变化区域...$stateProvider 处理路由状态服务,路由状态反映了该项应用程序位置,描述了在当前状态下UI是应该怎么样,并且该做什么。...ngRouteresolve选项可以允许开发者路由到达前载入数据保证(promises)。使用这个选项时比使用angular-route有更大自由度。

7.4K70
  • AngularJs HTTP响应拦截器实现登陆、权限校验

    $httpAngularJS  $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信。某些情况下,我们希望可以俘获所有的请求,并且将其发送到服务端之前进行操作。...return $q.reject(config); } } return httpInterceptor; } 因此,我们可以通过拦截器来判断用于登陆与权限问题...不能完全依靠本地逻辑 我们model里面增加一个用户拦截器,rensponseError判断错误码,抛出事件让Contoller或view来处理 app.factory('UserInterceptor...最后controller处理错误事件 $rootScope....("login",{from:$state.current.name,w:errorType}); }); 最后还可以loginController做更多细节处理 // 如果用户已经登录了,则立即跳转到一个默认主页上去

    2.2K90

    【Hybrid开发高级系列】AngularJS(三)——开发实践

    适用本教程Yeoman, Bower和Grunt版本     安装Yeoman生成器         传统Web开发流程,你可能会花很多时间配置代码模板、下载依赖还有手动组件项目文件结构上。.../ui-router/issues/92 1.3.3 路由变化监控 AngularJSlocationchange、routechange事件 http://blog.csdn.net/spy19881201.../Question/f341de90-c2ae-4d71-b0e6-c547c92fb4bf.html 1.3.4 路由拦截与重定向         路由拦截原理在于监听stateChangeStart...2 参考链接 2.1 AngularJS基础 整理AngularJS一些常用指令 http://www.xker.com/page/e2015/06/198575.html AngularJS移动开发坑汇总...c547c92fb4bf.html AngularJs ng-route路由详解 http://www.w2bc.com/article/95434 AngularJS ui-router (嵌套路由)

    24720

    Angular1.x使用小结

    基本概念  1、依赖注入   依赖注入,angular到处可见,这里不会照本宣科,只以很直白方式简单描述基本使用方式,以$scope注入为例。   ...2、directive   指令系统,我认为是angular1.x版本中最强大也是最复杂部分,angular作者本身做后端出身,所以整个指令周期也符合语言处理过程:经过编译(compile函数,会返回...3、component   component是1.5+新增方法,主要为了往angular2+过度更自然一些,相当于指令restrict:’E’简化,类似于vuecomponent,不建议操作...4、controller   controller可以认为是一个封装程序逻辑地方,这里和后端mvccontroller作用类似,拿到modal,渲染模版,angularscope是连接controller...ui-routerui-router是基于state一种路由框架,是使用最多一种路由模式。

    2.4K10

    3、Angular JS 学习笔记 – Controllers

    理解控制器 Angular,一个控制器是一个javascript构造函数用于填充Angular作用域。...当一个控制器通过使用ng-controller指令附加到DOM上时候,Angular将初始化一个新Controller对象,使用指定控制器构造函数。...一个新子作用域将可以作为一个参数$scope被注入到控制器构造函数。 控制器用于: 配置作用域对象初始化状态 添加行为到作用域对象 不要将控制器用于: 维护DOM – 控制器应该只包含业务逻辑。...格式化输入 – 应该使用angular表单控制器处理 过滤输出 – 应该使用angular过滤器处理 多个控制器中共享代码或状态 – 应该使用angular service。...作用域中所有属性都将提供给dom中注册了控制器模板。 下面的例子演示了创建一个GreetingController,附加一个包含字符串’Hola!’属性到作用域上。

    2.5K20

    angularjs 控制器、作用域、广播详解

    角色就会很尴尬,因为我们不可能把不同业务数据模型都绑在同一个控制器。...使用控制器时要注意几点: 1.不要去复用controller,一个控制器一般只负责一小块视图;(一般控制器处理都是业务逻辑,业务逻辑复用性一般很小) 2.不要在controller操作DOM,这不是控制器职责...$scope也是实现双向数据绑定基础; 8.可以用angular.element($0).scope()来进行调试; 9.$scope可以控制器之间传播事件,可以向上$scope....格式如下:$broadcast(eventName,args) $on用于作用域中监控从子级或父级作用域中传播事件以及相应数据。...$emit('to-parent', admin1); //$rootScope发出广播所有的作用域都可以接受到,可以用于同级之间进行广播 $rootScope

    1.9K51

    【Hybrid开发高级系列】AngularJS(一)——基础专题

    configFn: 模块启动配置函数,angular config阶段会调用该函数,对模块组件进行实例化对象实例之前特定配置,如我们常见对$routeProvider配置应用程序路由信息。...推荐将angular组件独立分离不同文件,module文件声明module,其他组件则引入module,需要注意是在打包或者script方式引入时候,我们需要首先加载module声明文件,然后才能加载其他组件模块...AngularJS表达式Angular expression是一种类似于JavaScript代码片段,AngularJS表达式仅在AngularJS作用 域中运行,而不是整个DOM运行。...不过现在为了产生这些链接,我们href属性里面使用我们早已熟悉 双括号数据绑定。步骤2,我们添加了{{phone.name}}绑定作为元素内容。...注入器(injector)将用于创建此应用程序依赖注入(dependency injection);     2. 注入器将会创建根作用域作为我们应用模型范围;     3.

    53980
    领券