如何使用 $transitions？

Posted 2023-02-22

【中文标题】如何使用 $transitions？

【英文标题】：How to use $transitions?

【发布时间】：2017-09-30 12:20:52

【问题描述】：

目前，我正在使用：

“angular-ui-router”：“^0.4.2” “角度”：“^1.6.3” “webpack”：“^2.4.1”

我知道我当前的实现可能是deprecated，只是在寻找新方法的实现（示例或文档）。非常感谢任何帮助，在此先感谢！

当前实现：

'use strict';

module.exports = angular
  .module('common', [
    'ui.router',
    'angular-loading-bar',
    require('./header').name,
    require('./sideBar').name,
    require('./footer').name
  ])
  .run(function($transitions, cfpLoadingBar) 
    $transitions.onStart(, cfpLoadingBar.start);
    $transitions.onSuccess(, cfpLoadingBar.complete);
  );

当前错误：

未捕获的错误：[$injector:unpr] 未知提供者：$transitionsProvider

【问题讨论】：

始终使用$inject 或数组符号手动指定注入。

@AluanHaddad，希望就这么简单。这不是依赖注入。

只是提到它以防你不知道。

【参考方案1】：

在新版本 (>=1.0.0) 中，不推荐使用 $state 更改事件，现在 你必须改用$transitions...

$transitions 用于新版本 (>= 1.0.0) (PLUNKER DEMO)

MyCtrl.$inject = ['$transitions'];

function MyCtrl($transitions) 
    $transitions.onSuccess(, function($transition)
        console.log($transition.$from());
        console.log($transition.$to());
        console.log($transition.params());
    );

按调用排序的可用事件：

$transitions.onStart(, function($transition)...);

$transitions.onExit(exiting: "stateName", function($transition)...);

$transitions.onRetain(, function($transition)...);

$transitions.onEnter(entering: "stateName", function($transition)...);

$transitions.onFinish(, function($transition)...);

$transitions.onSuccess(, function($transition)...);

详细查看每个事件方法：$transition service docs 还有一些示例：Migrations examples from 0.4.2 to 1.0.0 in official docs

---

旧版本的 $state 更改事件 ( (PLUNKER DEMO)：

MyCtrl.$inject = ['$scope'];

function MyCtrl($scope) 
    $scope.$on('$stateChangeStart', 
        function(event, toState, toParams, fromState, fromParams, options) ...);

    $scope.$on('$stateChangeSuccess', 
        function(event, toState, toParams, fromState, fromParams, options)...);

查看angular-ui-router docs 了解更多 $state 更改事件