Question

在我和我的团队正在处理的应用程序上，我们正在观察一些不一致的行为。当用户执行浏览器刷新时，刷新按钮会完全刷新页面，包括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，发现没有可能导致B.B或B.C重定向到B.A.的拼写错误。当我们使用通用组件时，我希望如果缺陷在组件控制器中，它会同等地影响所有页面，并导致任何页面刷新回到公共点，但事实并非如此。

Questiosn： 答：什么导致B.B和B.C重定向到B.A而不是自己？
B：我可以用什么方式改变它以确保B.B和B.C重定向到自己？

可能的解决方法： 我的研究表明，我可以做的一件事就是the entire project来缓存UI路由器状态。我想避免这种情况，因为理想情况下，这种路由应该只是工作＆＃39 ;;我们没有做任何特别的事情。如果我们在这方面做错了什么，我也需要知道它是什么，以便我和我的团队做不正确的事情。

Answer 1

问题在于＆＃39; B＆＃39; ＆＃39;树干＆＃39;路线不正确。它应该是：

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

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

AngularJS ui-router在手动刷新时表现不一致

1 个答案: