angular - 在 Angular 2 的 ui-router 中， $rootScope.$on ('$stateChangeStart' , ..) 的等价物是什么？

Question

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

请告诉我如何在 Angular 2 中完成以下 Angular 1 代码。

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

Answer 1

Nice Plunkr 例如:

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

在 ui-router-ng2 上，您有具有所有状态生命周期的服务 (TransitionService):

1) 您需要在构造函数中注入(inject)服务:

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 等...

希望对你有帮助，

祝你好运!