Angular 6 根据标准更改全局 css

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{
...
}