Css 使用url参数的动态主题

我有一个要求。你能建议一下实现这一目标的可能方法吗

我想根据每个路由中传递的URL更改应用程序的主题。我正在使用以下技术。 -前端：角度JS -后端：Node.js

例如：localhost/x/about localhost/y/about

我在登录时使用localation.search传递参数，通过cookies实现了这些功能。但是我在所有的路线上都需要这个主题参数。基于这个主题需要改变。有人能建议可能的方法吗

app.js menu.html（不完整，请更正，如何调用）

• green.css 正文{
  背景颜色：绿色； 颜色：#333； 字体系列：“Source Sans Pro”、Calibri、Candara、Arial、Sans serif；
  字体大小：15px； }
  • blue.css 正文{
    背景颜色：蓝色； 颜色：#333； 字体系列：“Source Sans Pro”、Calibri、Candara、Arial、Sans serif；
    字体大小：15px； }

---

快速简单的答案是使用$rootScope$rootScope可用于所有控制器，但与所有全局变量一样，应谨慎使用
这里有一篇很好的帖子解释$rootScope$rootScope和-$scope.html
基本上，如果你在x和y页的两个控制器上使用它

app.controller('login',['$scope','$rootScope', function ($scope,$rootScope) {
    $rootScope.foo='bar';
}]);

app.controller('xCtrl',['$scope','$rootScope', function ($scope,$rootScope) {
    $scope.lorem=$rootScope.foo;
    console.log($scope.lorem); //bar
}]);

app.controller('yCtrl',['$scope','$rootScope', function ($scope,$rootScope) {
    $scope.ipsum=$rootScope.foo;
    console.log($scope.ipsum); //bar
}]);

然后可以像平常一样在HTML标记中使用它们
使用$rootScope要简单得多，但是如果每次都想使用路由器来提取id，也可以这样做

app.config(function($routeProvider){
    $routeProvider
     .when('/',{
        controller: 'indexController',
        templateUrl: 'view/index.html'
     })
     .when('/:id/about',{
        controller: 'xCtrl',
        templateUrl: 'view/x.html'
     })
    .otherwise({
        redirectTo: '/'
    });
});

app.controller('xCtrl',['$scope','$routeParams', function($scope,$routeParams){
    $scope.foo=$routeParams.id;
}]);

如果你有比刚才/关于更多的页面，我可以想象这在路由上会变得有点棘手
您甚至可以将其与根作用域耦合，然后将其传递给其他控制器

app.controller('xCtrl',['$scope','$rootScope','$routeParams', function($scope,$rootScope,$routeParams){
    $rootScope.foo=$routeParams.id;
    $scope.lorem=$rootScope.foo;
}]);

--根据评论进行编辑-- 我可能需要一些代码来确定您想要的是什么，但这也许能澄清问题
URL:mysite.com/blue/about

app.config(function($routeProvider){
    $routeProvider
     .when('/',{
        controller: 'indexController',
        templateUrl: 'view/index.html'
     })
     .when('/:id/about',{
        controller: 'xCtrl',
        templateUrl: 'view/x.html'
     })
    .otherwise({
        redirectTo: '/'
    });
});

app.controller('xCtrl',['$scope','$routeParams', function($scope,$routeParams){
    $scope.theme=$routeParams.id;
}]);

HTML

---

这是一个适合通过rootscope更改模板的答案。因为我的要求是用户必须看到url中的主题信息以及相应的css文件更改。这只有一个css和几个类。我想为每个主题管理多个css文件，并且应用程序中所有导航的url都应该相同。例如：localhost/x/about、localhost/x/contact和localhost/y/about、localhost/y/contact。如果用户键入任何url，我必须使用控制器中的If语句更改css文件x/yTry，以便在需要时为类设置其他变量。查询参数如何保持不变，在所有路由/页面中，如果所有路由都在id后面，它将继续工作。/：id/about或/：id/lorem/ipsum或/：id/x/y/z将能够从$routeParams获取id参数

app.controller('login',['$scope','$rootScope', function ($scope,$rootScope) {
    $rootScope.foo='bar';
}]);

app.controller('xCtrl',['$scope','$rootScope', function ($scope,$rootScope) {
    $scope.lorem=$rootScope.foo;
    console.log($scope.lorem); //bar
}]);

app.controller('yCtrl',['$scope','$rootScope', function ($scope,$rootScope) {
    $scope.ipsum=$rootScope.foo;
    console.log($scope.ipsum); //bar
}]);

app.config(function($routeProvider){
    $routeProvider
     .when('/',{
        controller: 'indexController',
        templateUrl: 'view/index.html'
     })
     .when('/:id/about',{
        controller: 'xCtrl',
        templateUrl: 'view/x.html'
     })
    .otherwise({
        redirectTo: '/'
    });
});

app.controller('xCtrl',['$scope','$routeParams', function($scope,$routeParams){
    $scope.foo=$routeParams.id;
}]);

app.controller('xCtrl',['$scope','$rootScope','$routeParams', function($scope,$rootScope,$routeParams){
    $rootScope.foo=$routeParams.id;
    $scope.lorem=$rootScope.foo;
}]);

app.config(function($routeProvider){
    $routeProvider
     .when('/',{
        controller: 'indexController',
        templateUrl: 'view/index.html'
     })
     .when('/:id/about',{
        controller: 'xCtrl',
        templateUrl: 'view/x.html'
     })
    .otherwise({
        redirectTo: '/'
    });
});

app.controller('xCtrl',['$scope','$routeParams', function($scope,$routeParams){
    $scope.theme=$routeParams.id;
}]);

<div ng-controller="xCtrl">
    <div ng-class="{{theme}}">
        My theme is {{theme}}.
    </div>
</div>

.blue
{
    background-color: blue;
}
.green
{
    background-color: green;
}