Question

我正在开发angularJs单页应用程序。目前我的应用程序有四种用户（访客，学生，教师，管理员）。我想为每个用户角色显示不同的仪表板意味着我想为每个用户显示不同的主题。我怎么能在单页面应用程序中执行此操作。我见过这个＆＃34; AngularJS switch css theme on user selection ＆＃34;但我无法理解这个想法。

Answer 1

您可以创建一个包含4个父类的单个css文件

.guest，.student，.instructor和.admin

现在，在您的应用中使用父div中的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')">

Answer 2

最简单的方法是开发一个负责布局和基本样式的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 =“{'theme1'：userType =='instructor'，'theme2'：userType =='admin'...}”。

这基本上就是你提到的问题所解释的。

在单个angularJs应用程序中为每个用户类型使用不同的主题

2 个答案: