在我和我的团队正在开发的应用程序上，我们观察到一些不一致的行为。 当用户执行浏览器刷新时，刷新按钮会完全刷新页面，包括 UI 状态...但仅限于特定路线。
我们的应用程序从/Home路由开始，该路由设置整个应用程序以及组件层次结构。 用户继续A.A、A.B、A.C，这些功能都很好。B.A也很好用。
然后，麻烦。 如果从B.B或B.C执行浏览器刷新，则会返回到B.A。 我们希望最终用户从这些页面刷新时返回到B.B或B.C。
路线.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});
我们实际执行路由的方式是使用组件！
相关网页：
<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，没有发现会导致 B.B 或 B.C 重定向到 B.A. 的拼写错误。 由于我们使用的是通用组件，因此我希望如果缺陷在组件控制器中，它将平等地影响所有页面，并导致任何页面刷新回退到公共点，但事实并非如此。
Questiosn：A：是什么导致B.B和B.C重定向到B.A，而不是他们自己？
B： 我可以通过什么方式更改它以确保 B.B 和 B.C 重定向到自己？
可能的解决方法：我的研究表明我可以做的一件事是使用localStorage和.run()来缓存 UI 路由器状态。 我想避免这种情况，因为理想情况下，这种路由应该"正常工作";我们没有做任何特别的事情。 如果我们在这方面做错了什么，我还需要知道它是什么，这样我和我的团队就不会做错误的事情。
问题是"B"干线"路线不正确。 它应该是：
.state('B', {
url: '/B',
templateUrl: 'app/A/A.html',
controller: 'aCtrl',
controllerAs: '$ctrl'
})
.state('B.A', {
// ...Other B substates here...
})
似乎将"中继"视图定义为组件与UI路由器设置有一些尴尬的关系。 相反，应始终以更经典的方式定义主干视图，并定义 URL、控制器/控制器作为设置。 发生这种情况时，子组件状态可以按我们预期的方式工作。