在单个angularJs应用程序中为每个用户类型使用不同的主题
在单个angularJs应用程序中为每个用户类型使用不同的主题
提问于 2018-05-23 15:22:48
我正在开发angularJs单页应用程序。目前我的应用有四种用户(来宾、学生、讲师、管理员)。我想为每个用户角色显示不同的仪表板，这意味着我想为每个用户显示不同的主题。我如何在单页面应用程序中做到这一点。我看过这个“AngularJS switch css theme on user selection ”，但我不能理解它的意思。
回答 2
Stack Overflow用户
发布于 2018-05-23 19:55:09
您可以创建一个包含4个父类的css文件
.guest、.student、.instructor和.admin
现在，在您的应用程序中使用父目录中的ng-class，请参见下面的语法
<div ng-class="{class1 : expression1, class2 : expression2}">
Hello World!
</div>假设userType保存登录的用户类型的值，然后
<body ng-class="{guest : userType===guest, student : userType===student, instructor : userType===instructor, admin : userType===admin}">
Hello World!
</body>或者可以使用if else条件，如下所示
<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">Stack Overflow用户
发布于 2018-05-24 03:30:56
最简单的方法是开发一个负责布局和基本样式的css文件，例如：
.component1 {
display: inline-block;
width: 10%;
border-radius: 5px;
}然后在单独的css文件中为特定用户开发样式，如下所示：
.theme1 .component1 {
color: red;
background: gray;
}另一个主题是这样的：
.theme2 .component2 {
color: green;
background: blue;
}最后一步是添加标签ng-class=“{‘userType==’：admin‘教师’，‘主题2’：userType =='admin'...}”。
这基本上就是你提到的问题所解释的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50482226
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号