Question

我有如下要求：一个站点有许多元素，按钮，文本框等，这些元素需要根据登录的用户来更改字体大小，颜色等。实现此目的的最佳方法是什么？例如，如果用户A登录，站点上的按钮应为绿色，用户B的按钮应为蓝色，用户c的按钮为黄等。整个css需要根据登录者进行更改。我的最初想法是以某种方式使用Angular Universal。有什么想法，建议吗？

Answer 1

是的，对此有解决方案。类似的是我的问题。我使用开关盒在用户的颜色之间切换。以下是使用ngStyle的代码

HTML

<span style="width:100%;color: #fff;padding: 3%;border-radius: 5px;" [ngStyle]="{'background-color':getColor(a.actions[0])}">
            {{a.actions[0]}}
          </span> &nbsp;
          <span style="width:100%;color: #fff;padding: 3%;border-radius: 5px;" [ngStyle]="{'background-color':getColor(a.actions[1])}">
            {{a.actions[1]}}
          </span>

TS零件

getColor(color) {
    switch (color) {
      case 'Enable':
        return 'green';
      case 'Perma Disable':
        return 'red';
      case 'Temp Disable':
        return 'purple';
    }
  }

Answer 2

如果您只想设置背景颜色：

<button [style.backgroundColor]="getColor()" ...></button>

TS

  getColor(){
    if(user.something=='A')
      return 'blue'
    .
    .
    .
    }

如果您要设置一些样式，我建议您使用ngClass：

<div [ngClass]="user.something"><div>

在CSS中：

.a{
...
}
.b{
...
}

Angular 6根据标准更改全局CSS

2 个答案: