Angular 2路由器全局状态更改事件

Angular 2 router global state change event

本文关键字：事件 状态 全局 路由器 Angular      更新时间：2023-09-26

当状态更改/启动时，我们可以使用一个全局事件，而不是每个组件，这与组件生命周期挂钩不同？类似于UI路由器：

  $rootScope.$on("$stateChangeStart", function() {})

这取决于您想要实现什么，但可以在顶级组件中注入Router，并向其注入.subscribe()以获得状态流。

我使用它来构建根据当前状态更改浏览器标题的功能。话虽如此，您可以将其视为Angular 1中的$stateChangeSuccess和$stateChangeFailure事件的等价物。

代码为：

constructor(router: Router) {
    router.subscribe(successHandler, failureHandler);
}

还可以看看OnActivate，它也与这些概念有关。

我的ui路由器代码最终看起来像下面这样，以取代Angular2:的ng1$rootScope$stateChangeSuccess

import { Component } from '@angular/core';
import { TransitionService } from "ui-router-ng2";
@Component({selector: 'app-stage-tag',template: '...'})
class AppComponent {
  constructor(public transitionService: TransitionService){
    transitionService.onSuccess({to:'*'}, transition=>{
      console.log('state', transition._targetState._definition)
      console.log('params', transition._targetState._params)
    })
  }
}
相关文章：