在AngularJS中使用ngRoute动态更改页面标题

Changing Page Title Dynamically in AngularJS using ngRoute

本文关键字：标题 动态 ngRoute AngularJS      更新时间：2023-09-26

虽然我已经成功地根据不同的路由改变了页面标题，但当变量进入图片时，我卡住了。

<title ng-bind="title"></title>

角度部分

var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'igTruncate']);
 app.config([ '$routeProvider', '$locationProvider', '$sceDelegateProvider', function($routeProvider, $locationProvider, $sceDelegateProvider){
 $routeProvider
  .when('/', {
    controller: 'BaseController',
    templateUrl: 'views/base.html',
    title: 'Welcome to the Website'
  })
  .when('/about', {
    controller: 'AboutController',
    templateUrl: 'views/about.html',
    title: 'About Me'
  });
}]);
// change Page Title based on the routers
app.run(['$location', '$rootScope', function($location, $rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
    });
}]);

这工作得很好。但是，既然我创建了一个博客，每个博客页面应该有不同的标题。

我的博客路由是这样的

 .when('/blog/post/:url', {
        controller: 'PostController',
        templateUrl: 'views/post.html',
        title:  'Blog'
      })

我想从路由中获取url param并将其连接到我的标题中。例如，如果路由是/blog/post/How-to-change-title-in-angularjs，那么我想获得url部分并将其添加到我的标题中，所以它看起来像How-to-change-title-in-angularjs | Blog

有可能吗?

你可以从angular文档中查看以下内容:https://docs.angularjs.org/api/ngRoute/service/美元routeParams

你可以从后端传递标题。如果没有后端，则将其存储在控制器的作用域

中可能会更简单。
相关文章：