AngularJS ui路由器在手动刷新时表现不一致

在我的团队和我正在研究的应用中，我们观察到一些不一致的行为。当用户执行浏览器刷新时，刷新按钮会完全刷新页面，包括用户界面状态......但只能执行到某个特定路线。AngularJS ui路由器在手动刷新时表现不一致

我们的应用程序开始于/Home路线，该路线设置了整个应用程序以及组件层次结构。用户进入A.A,A.B，A.C，这一切都正常。 B.A也很好。

然后麻烦。如果您从B.B或B.C执行浏览器刷新，则会返回到B.A。我们预计，如果最终用户从这些页面刷新，他们将返回到B.B或B.C。

Routes.ts

$stateProvider 
     .state('Home', 
     { 
      url: '/Home', 
      templateUrl: 'App/Home/home.html', 
      controller: 'homeCtrl', 
      controllerAs: '$ctrl' 
     }) 
     .state('A', 
     { 
      url: '/A', 
      templateUrl: 'app/A/A.html', 
      controller: 'aCtrl', 
      controllerAs: '$ctrl' 
     }) 
      .state('A.A', 
      { 
       url: '/A.A', 
       component: 'aPartA' 
      }) 
      .state('A.B', 
      { 
       url: '/A.B', 
       component: 'aPartB' 
      }) 
      .state('A.C', 
      { 
       url: '/A.C', 
       component: 'aPartC' 
      }) 
     .state('B', 
     { 
      url: '/B', 
      component: 'b' 
     }) 
      .state('B.A', 
      { 
       url: '/B.A', 
       component: 'bPartA' 
      }) 
      // Beyond this part, oddness starts... 
      .state('B.B', 
      { 
       url: '/B.B', 
       component: 'bPartB' 
      }) 
      .state('B.C', 
      { 
       url: '/B.C', 
       component: 'bPartC' 
      }); 

    $urlRouterProvider.otherwise('/Home'); 

    $locationProvider.html5Mode({ enabled: true});

我们实际上执行了路由的方式，使用分量！

相关HTML：

<order-navigation validate-view="$ctrl.validate(someForm)" 
    previous-route="A.C" 
    previous-button-text="previous" 
    next-route="B.A" 
    next-button-text="continue"> 
</order-navigation>

订购的导航组件，控制器：

export class OrderNavigationCtrl implements angular.IController { 
    //#region Variables/Properties 

    public nextRoute: string; 
    public previousRoute: string; 
    public nextButtonText: string; 
    public previousButtonText: string; 
    public validateView :() => boolean; 

    //#endregion Variables/Properties 

    //#region Constructor 

    public static $inject: string[] = ['$state', '$window']; 
    constructor(
     private $state: angular.ui.IStateService, 
     private $window: angular.IWindowService) { 
    } 

    public $onInit(): void { 

    } 

    //#endregion Constructor 

    //#region Methods 

    public navigatePrevious(route: string): void { 
     if (route.search('www') > 0) 
      this.$window.open(route, '_self'); 
     else 
      this.$state.go(route); 
    } 
    public navigateNext(route: string): void { 
     if (this.validateView()) 
      this.$state.go(route); 
    } 

    //#endregion Methods 
}

我检查了每个页面的HTML，并没有发现错别字，会导致BB或BC重定向到BA由于我们使用的是公共组件，因此我认为如果缺陷位于组件控制器中，它将平等地影响所有页面，并导致任何页面刷新回落到公共点，但情况并非如此。

Questiosn： A：什么导致B.B和B.C重定向到B.A，而不是自己？
B：我可以通过什么方式改变这一点以确保B.B和B.C重定向到自己？

可能的解决方法： 我想我的研究已经表明，我能做的就是use localStorage and .run()缓存UI路由器状态。我想避免这种情况，因为理想情况下，此路由应该“正常工作”;我们没有做任何特别的事情。如果我们在这方面做得不正确，我还需要知道它是什么，这样我和我的团队就不会做那种不正确的事情。

来源

2017-08-07 Andrew Gray

问题是'B''trunk'路线不正确。它应该是：

.state('B', { 
    url: '/B', 
    templateUrl: 'app/A/A.html', 
    controller: 'aCtrl', 
    controllerAs: '$ctrl' 
}) 
    .state('B.A', { 
     // ...Other B substates here... 
    })

看起来，将'trunk'视图定义为组件与UI路由器设置有一些尴尬的关系。相反，应始终使用更经典的方式定义树干视图，并将URL，控制器/控制器定义为设置。发生这种情况时，子组件状态可以按照我们所期望的方式工作。

来源

2017-08-07 21:10:29

AngularJS ui路由器在手动刷新时表现不一致

回答

相关问题