angularjs - ui-router 1.x.x 在解析期间更改 $transition$.params()

Question

尝试迁移 angularjs 应用程序以使用 angular-ui-router 的新版本1.0.14 并在尝试更改时偶然发现了一个问题 $stateParams在一个国家的决心下。

例如，以前(使用 angular-ui-router 0.3.2 时)修改 $stateParams像这样工作:

 $stateProvider.state('myState', {
   parent: 'baseState',
   url: '/calendar?firstAvailableDate',
   template: 'calendar.html',
   controller: 'CalendarController',
   controllerAs: 'calendarCtrl',
   resolve: {
     availableDates: ['CalendarService', '$stateParams', function(CalendarService, $stateParams) {
       return CalendarService.getAvailableDates().then(function(response){
          $stateParams.firstAvailableDate = response[0];
          return response;
       });
     }]
   }
 })

问题是 firstAvailableDate解决后填充，我不知道如何更新 $transition$.params()在使用 angular-ui-router 的新版本时进行解析1.0.14。

我已经尝试过，并设法更新了 url 参数

发射 $state.go('myState', {firstAvailableDate : response[0]})但这会重新加载状态，因此屏幕会闪烁

修改$transition$.treeChanges().to[$transition$.treeChanges().length-1].paramValues.firstAvailableDate = response[0];实际覆盖参数。在查看了 params() 上的实现后，我完成了这项工作。对于 $transition$ .

尽管这两个选项都有效，但它们似乎是黑客而不是书籍实现。

尝试在解析中修改参数时使用的正确方法是什么？

Answer 1

使用动态参数的方法:
看看这个文件:params.paramdeclaration#dynamic .也许这就是你要找的:...a transition still occurs... .

When dynamic is true, changes to the parameter value will not cause the state to be entered/exited. The resolves will not be re-fetched, nor will views be reloaded.

Normally, if a parameter value changes, the state which declared that the parameter will be reloaded (entered/exited). When a parameter is dynamic, a transition still occurs, but it does not cause the state to exit/enter.

This can be useful to build UI where the component updates itself when the param values change. A common scenario where this is useful is searching/paging/sorting.

备注 您无法将这样的逻辑放入您的 $stateProvider.state中的决心中.我会使用 dynamic 来做到这一点防止状态重新加载的参数。不幸的是， dynamic当您尝试在解析部分中更新您的状态(例如，通过使用 $stage.go() )时，规则不起作用。所以我将这个逻辑移到 Controller 中以使其正常工作 - DEMO PLNKR .
由于 userId是一个动态参数， View 在更改时不会再次进入/退出。
定义你的动态参数:

  $stateProvider.state('userlist.detail', {
    url: '/:userId',
    controller: 'userDetail',
    controllerAs: '$ctrl',
    params: {
      userId: {
        value: '',
        dynamic: true
      }
    },
    template: `
        <h3>User {{ $ctrl.user.id }}</h3>
        
        <h2>{{ $ctrl.user.name }} {{ !$ctrl.user.active ? "(Deactivated)" : "" }}</h2>
        
        <table>
          <tr><td>Address</td><td>{{ $ctrl.user.address }}</td></tr>
          <tr><td>Phone</td><td>{{ $ctrl.user.phone }}</td></tr>
          <tr><td>Email</td><td>{{ $ctrl.user.email }}</td></tr>
          <tr><td>Company</td><td>{{ $ctrl.user.company }}</td></tr>
          <tr><td>Age</td><td>{{ $ctrl.user.age }}</td></tr>
        </table>
    `
  });

你的 Controller :

app.controller('userDetail', function ($transition$, $state, UserService, users) {
  
  let $ctrl = this;
  
  this.uiOnParamsChanged = (newParams) => {
    
    console.log(newParams);
    
    if (newParams.userId !== '') {
      $ctrl.user = users.find(user => user.id == newParams.userId);
    }
  };
  
  this.$onInit = function () {
    
    console.log($transition$.params());
    
    if ($transition$.params().userId === '') {
      UserService.list().then(function (result) {
        $state.go('userlist.detail', {userId: result[0].id});
      });
    }
  }
});

使用 $transition.on* 处理新参数路线更改开始的 Hook :
另一种方法是设置正确的 state在您更改为您的状态之前的参数。但你已经说过，这是你不想要的。如果我遇到同样的问题:我会尝试设置正确的 state更改 View 之前的参数。

app.run(function (
    $transitions,
    $state,
    CalendarService
) {

    $transitions.onStart({}, function(transition) {
        if (transition.to().name === 'mySate' && transition.params().firstAvailableDate === '') {

            // please check this, I don't know if a "abort" is necessary
            transition.abort();

            return CalendarService.getAvailableDates().then(function(response){
                // Since firstAvailableDate is dynamic 
                // it should be handled as descript in the documents.
                return $state.target('mySate', {firstAvailableDate : response[0]});
            });
        }
    });
});

使用 $transition.on* 处理新参数通过 redirectTo 开始更改路线的 Hook

Note: redirectTo is processed as an onStart hook, before LAZY resolves.

这与上面标题“ 使用 $transition.on* 处理新参数在路线更改开始 上的钩子(Hook)处理新参数附近提供的内容相同”，因为 redirectTo也是 onStart钩与自动处理。

$stateProvider.state('myState', {
    parent: 'baseState',
    url: '/calendar?firstAvailableDate',
    template: 'calendar.html',
    controller: 'CalendarController',
    controllerAs: 'calendarCtrl',
    redirectTo: (trans) => {
        if (trans.params().firstAvailableDate === '') {
            var CalendarService = trans.injector().get('CalendarService');
            return CalendarService.getAvailableDates().then(function(response){
                return { state: 'myState', params: { firstAvailableDate: response[0] }};
            });
        }
    }
});