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路由器在手動刷新時表現不一致

回答

相關問題