浏览器的后退按钮在Angular应用程序中无需刷新即可运行

时间:2014-08-13 08:32:02

标签: angularjs angularjs-routing

我有一个Angular应用程序,它有几个ng-controller和几个模板。这是我的路由的片段:

when('/claims', {
    templateUrl: '/angular_templates/index',
    controller: 'ClaimsController',
    resolve: {
        rootClaims: ['claimsCache', function (claimsCache) {
            return claimsCache.getResource(0);
        }]
    }
}).when('/claims/:id', {
    templateUrl: '/angular_templates/show',
    controller: 'ClaimController',

    resolve: {
        claim: ['$http', '$route', function ($http, $route) {
            return $http.get('/claims/' + $route.current.params.id + '.json').then(
                function (response) {
                    return response.data;
                },
                function (response) {
                    console.log(response.status);
                    return {};
                }
            );
        }]
    }
}).when('/tags/:id/claims_with_tag', {
    templateUrl: '/angular_templates/tag_claim.html',
    controller: 'TagController',
    resolve: {
        tag: ['$http', function ($http) {
            return $http.get('claims_with_tag.json').then(
                function (response) {
                    return response.data;
                },
                function (response) {
                    console.log(response.status);
                    return {};
                }
            );
        }]
    }
});

当我通过手动输入URL并按Enter键逐个打开多个页面,然后按浏览器的后退按钮 - 一切正常。但是当我通过单击页面上的某些链接从一个页面导航到另一个页面然后使用“返回”按钮时,我可以在控制台中看到所有数据都已加载,查询被发送到服务器,但实际上没有显示ng-content这页纸。页面刷新后所有加载都很好。

我注意到了另一个特点 - 后面的导航不适用于那个首先打开的页面。例如,我手动输入page1的地址,然后转到page2,page3,然后单击浏览器中的Back按钮 - 一直有效,直到我们到达第一页(此示例中的第1页)。到达page1时,我可以在控制台中看到来自服务器的数据,但它没有在页面上显示。

有没有人知道这个问题的解决方案?

2 个答案:

答案 0 :(得分:0)

当你从一个页面导航到另一个页面时,听众就不见了。

在您导航到任何页面后,您似乎需要重新连接按钮侦听器...

答案 1 :(得分:0)

您需要订阅Param中的ActivatedRoute,并在每个组件中相应地处理流程,如下所示:

this.route.params.subscribe((params: Params)=>{
});