Angular 2 的 ui-router 中的 $rootScope.$on('$stateChangeStart', ..) 相当于什么？

Question

我有 Angular 1 的 ui-router 经验，现在我想知道如何$stateChangeStart在 ui-router-ng2 中监听。

请让我知道下面的 Angular 1 代码如何在 Angular 2 中完成。

$rootScope.$on('$stateChangeStart', function(event, next) {});

Answer 1

不错的 Plunkr 例如：

https://plnkr.co/edit/k8PgPKRNu0llT521p5R5?p=preview

在 ui-router-ng2 上，您拥有具有所有状态生命周期的服务（TransitionService）：

1）您需要在构造函数中注入服务：

import {TransitionService} from "ui-router-ng2";
constructor(private transitionService:TransitionService) {}

2）回调函数：

transitionService.onStart({}, ()=>{
   console.log("state changed");
})

您可以在第一个值上添加条件，例如：

transitionService.onStart({from: 'home', to: 'other'}, ()=>{
   console.log("state changed");
})

（仅当当前状态为“home”且下一个状态为“other”时才会调用回调）

** 您还可以调用 onSuccess、onError、onEnter、onFinish 等...

我希望你觉得这对你有帮助，

祝你好运！