如何在现有Angular项目中无需新增函数，用JS/CSS加按钮切换背景色

由于不需要新增自定义函数，我们可以直接在Angular模板内通过事件绑定直接操作页面背景样式，无需修改组件TS层代码。

实现步骤 #

• 新增切换按钮，在(click)事件中直接编写背景色切换的JS表达式即可，示例按钮代码如下：

<button (click)="document.body.style.backgroundColor = document.body.style.backgroundColor === '#f0f0f0' ? '#ffffff' : '#f0f0f0'">切换页面背景色</button>

你可以自行修改代码中的#f0f0f0（浅灰色）和#ffffff（白色）为你想要的任意色值。

修改后的完整代码 #

<app-header></app-header>

<div>
    <h2>
        Select project: <br>
        <select [(ngModel)]="selectedProject" (ngModelChange)="onProjectChange($event)">
           <option [ngValue] = "project" *ngFor="let project of projects">{{project}}</option>
        </select>
    </h2>
    <!-- 新增的切换按钮 -->
    <button (click)="document.body.style.backgroundColor = document.body.style.backgroundColor === '#f0f0f0' ? '#ffffff' : '#f0f0f0'">切换页面背景色</button>
</div>
<div *ngIf="(!andon) && selectedProject" id="container">
    <hr>
    <h2>Device not connected.</h2> 
</div>

<app-footer></app-footer>

原理解释 #

Angular的模板事件绑定原生支持执行合法的JS表达式，上述代码直接在点击事件中读取当前body的背景色值，通过三元判断切换为目标色值，全程不需要在组件类中新增任何自定义函数。

内容的提问来源于stack exchange，提问作者Mohammad sAdrA Ghayoomi