Angular 角度4主题化用于背景颜色更改

我想在单击angular 4中的相应彩色按钮时更改div的背景色

---

如上图所示，每当我点击任何颜色时，背景都应该改变。

创建一个名为“color”的全局变量，并将其设置为默认颜色。还可以创建一个在颜色之间切换的函数

public color = 'default';
changeColor(color: string) {
    this.color = color
}

在css文件中，为每种颜色定义类

.default {
    background-color: #fff;
}

.blue {
    background-color: blue;
}

.red {
    background-color: red;
}

现在，在HTML代码中，您可以调用将颜色字符串作为输入参数传递的函数。您可以使用此条件[ngClass]=“color”在任何您想要的地方获得应用的颜色

<div [ngClass]="color">
    <button (click)="changeColor('blue')">blue Button</button>
    <button (click)="changeColor('red')">red Button</button>
<div>

蓝色按钮
红色按钮

至少展示一下您迄今为止所做的工作。我还没有尝试过任何东西，我需要一个想法来做到这一点