UI-Router中的特定内容的页面标题

时间:2022-04-17 10:46:26

When using UI-Router, how do you handle content specific page titles?

使用UI-Router时,如何处理特定于内容的页面标题?

I can handle normal page titles just fine, for example:

我可以很好地处理正常的页面标题,例如:

.state('login', {
    url: '/login',
    views: {
        "navbar": {
            template: normalNavbarTemplate
        },
        "content": {
            template: '<login authenticated="(bCtrl.userSession && bCtrl.userSession.isAuthenticated)"></login>'
        }
    },
    title: 'My Website (0.2) - Login'
})

And then:

然后:

$rootScope.$on('$stateChangeSuccess', function (evt, toState) {
    $window.document.title = toState.title;
});

But what happens when you want your title to include content specific content, which you are obtaining using resolve?

但是,当您希望您的标题包含内容特定的内容(使用resolve获取内容)时,会发生什么情况呢?

I guess you can inject $window into your components, and set the title that way, but it feels messy. Are there any nicer recipes for this which I may have missed?

我猜您可以向组件中注入$window,并将标题设置为这样,但感觉有点混乱。有没有更好的方法,我可能漏掉了?

Thanks

谢谢

1 个解决方案

#1


3  

You can change the title property inside the resolve:

您可以在解析中更改标题属性:

resolve: {
    content: function($http) {
        return $http.get('some_url').then(function(result) {

            this.self.title = result.data.title; // set the title property to whatever you like

            return result;
        }.bind(this));
    }
}

#1


3  

You can change the title property inside the resolve:

您可以在解析中更改标题属性:

resolve: {
    content: function($http) {
        return $http.get('some_url').then(function(result) {

            this.self.title = result.data.title; // set the title property to whatever you like

            return result;
        }.bind(this));
    }
}