角度 UI 路由器 - 在没有参数的情况下从一个状态转换到同一状态失败

Angular ui router - Transistion from one state to same state without parameters fails

本文关键字：状态 一个 转换 失败 路由器 UI 情况下 参数 角度      更新时间：2023-09-26

Plunker Demo

  <script>
    var myapp = angular.module('myapp', ["ui.router"])
     myapp.config(function($stateProvider, $urlRouterProvider) {
      // For any unmatched url, send to /route1
      $urlRouterProvider.otherwise("/dashboard")
      $stateProvider
        .state('dashboard', {
          url: '/dashboard',
          templateUrl: 'dashboard.html',
          controller: 'MainCtrl'
        })
        .state('verify', {
          url: '/verify?email&code',
          templateUrl: 'verify.html',
          controller: 'verifyCtrl'
        })
    });
    myapp.controller('MainCtrl', function($scope,$state) {
      $scope.goTo = function () {
        $state.go('verify',{'email':'param@test.com', 'code': {'name': 'test name'}});
      }
    })
    myapp.controller('verifyCtrl', function($scope, $stateParams) {
      $scope.email = $stateParams.email;
      $scope.code = $stateParams.code.name;
    })
  </script>

当从带参数转换的状态导航到没有参数的相同状态时，它不起作用。

在演示中，首先单击"使用电子邮件和代码验证"，然后单击其他链接"在没有参数的情况下验证"。它将无法正确导航。

状态属性

通常在从一种状态转换到另一种状态时继承。如果未定义参数，这也会导致它们被复制。使用inherit=false将阻止这种情况。要在 ui-serf 中使用此选项，我们有 ui-sref-opts 属性。

Demo-Plunker

在 HTML 中：

<a ui-sref="verify" ui-sref-opts="{inherit: false}">verify without params</a>

在 JS 中：

$state.go('verify',{},{inherit:false});
相关文章：