在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) {});

- Adeeb basheer

---

你有查看文档吗？ - Rabban

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

希望这对您有所帮助，

祝您好运！

- YairTawil

---

关于Transition Service的一切：https://ui-router.github.io/ng2/docs/latest/classes/transition.transitionservice.html - Chris T

关于在组件中添加 Transition Hooks 的一个警告：它们不会自动清理，因此如果组件将通过 ngOnDestroy 被销毁，它们必须被显式地清理。 - Chris T

我的建议是不要在组件中添加转换钩子。最好将转换钩子添加到服务中，在那里构造函数只会被调用一次。 - YairTawil