angular ui-router：在解析中获取 toState 的 $state 信息

Posted 2023-02-19

【中文标题】angular ui-router：在解析中获取 toState 的 $state 信息

【英文标题】：angular ui-router: get $state info of toState in resolve

【发布时间】：2014-05-24 00:55:47

【问题描述】：

更新：从 1.0.0alpha0 开始，这应该可以在 angular-ui-router 中实现。请参阅发行说明https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0 和我创建的问题https://github.com/angular-ui/ui-router/issues/1018。

我想在处理解析时使用 angular ui-router 访问应用程序正在导航的状态名称和其他属性。

原因：我想在允许应用进入该页面之前异步加载一些用户数据（包括他们的访问权限）。

目前这是不可能的，因为将 $state 注入解析指向您正在导航离开表单的状态，而不是您正在导航到的状态。

我知道我可以：

使用 $rootScope('$stateChangeStart') 在其他地方获取 toState 并将其保存在我的设置服务中。但我觉得有点乱。 将状态硬编码到解析中，但我不想对所有页面重复使用我的解析

我还在 ui-router github 上创建了一个问题（如果您有兴趣，请+1！）： https://github.com/angular-ui/ui-router/issues/1018

到目前为止，这是我的代码。任何帮助表示赞赏！

.config(function($stateProvider) 

    $stateProvider.state('somePage', 
        // ..
        resolve: 
            userData: function($stateParams, $state, Settings) 
                return Settings.getUserData() // load user data asynchronously
                    .then(function (userData) 
                        console.log($stateParams);
                        console.log($state);
                        // Problem: $state still points to the state you're navigating away from
                    );
            
        
    );
);

【问题讨论】：

我也对这个问题的答案感兴趣......面对完全相同的情况。

这个文档很好地解释了如何使用 resolve github.com/angular-ui/ui-router/wiki

嗨@Timmz 感谢您的意见。不幸的是，文档没有提供有关如何访问您正在导航到的 $state 信息的信息。注入 $state 会为您提供解析时正在导航的状态。

【参考方案1】：

Ui-Router 1.x 更新

$provide.decorator('$state', ($delegate, $transitions) => 
    $transitions.onStart(, (trans) => 
      $delegate.toParams = trans.params()
      $delegate.next = trans.to().name
    )
    return $delegate
  )

Ui-Router 0.x

您始终可以使用next 和toParams 属性装饰$state：

angular.config(function($provide) 
  $provide.decorator('$state', function($delegate, $rootScope) 
    $rootScope.$on('$stateChangeStart', function(event, state, params) 
      $delegate.next = state;
      $delegate.toParams = params;
    );
    return $delegate;
  );
);

这样使用：

.state('myState', 
    url: '/something/id',
    resolve: 
        oneThing: function($state) 
            console.log($state.toParams, $state.next);
        
    
);

【参考方案2】：

所以我自己发现了这个问题的答案。如果你的代码表现得像我的， $stateParams 对象被正确注入，但 $state 是一个空（或旧）状态对象。

对我有用的是在解析函数中引用this：

.state('myState', 
    url: '/something/id',
    templateUrl: '/myTemplate.html',
    controller: function() ,
    resolve: 
        oneThing: function($stateParams) 
            console.log($stateParams); // comes through fine
            var state = this;
            console.log(state); // will give you a "raw" state object
        
    
)

第一个日志将返回您所期望的。第二个日志将返回一个“原始”（因为没有更好的术语）状态对象。因此，例如，要获取州名，您可以访问 this.self.name。

我意识到这不是首选...如果$state（或其他标准化对象）可以在解决时为我们提供此信息会更好，但这是我能找到的最好的。

希望对您有所帮助...

【讨论】：

这似乎工作得很好，谢谢！您是否有任何文件或证据证明这是预期的行为？我对将其集成到我的代码中有所保留，但不能保证这在未来的版本中不会中断。

当您将解析包含在抽象（父）状态中时，这种方法似乎会中断。你会期望$state 是扩展状态，但是this 会返回父状态。我不知道如何解决这个问题（还），或者这是否可能。尽管如此，我想我会将我的发现添加到这个决议中:)

@NathanRutman 感谢您添加您的观点。我明白你在说什么，完全同意。话虽如此，了解完整状态“路径”是什么（即使处于父状态）可能是非常有用的信息；例如访问子状态特定数据。无论如何，这是一个（一如既往）有利有弊的架构决策。

它对我不起作用。解析函数中的“this”只是窗口对象。

@ThomasVervest，关于一个引用（尽管不相关）的主题，您的评论让我意识到解决方案确实在抽象状态下工作。早些时候，我遇到了问题并假设我们不能，但事实证明我可能试图在我的抽象路由解析中使用 $stateParams / $state 。 +1 间接#tapsTheHead

【参考方案3】：

this.toString() 会给你州名

【参考方案4】：

这已被问到here。

看起来它们已内置于 1.0.0-rc.2 $state$ 中，您可以将其注入 resolve 函数并获取此信息。

resolve: 
  oneThing: function($state$) 
    console.log($state$);