Question

我正在为我的项目使用角度4，并希望在点击某个元素时使用组件 .ts 文件添加<body>标记的背景颜色。

但是，如果一旦颜色改变为让我们说蓝色，当我们点击任何其他组件时，蓝色仍然存在。我想在点击任何其他组件时删除蓝色。即使其他组件，<body>的蓝色也会保持蓝色。

Answer 1

您可以考虑添加一个指令并将其设置为，例如，组件的包装div。在指令为“alive”时将特定类添加到正文中，然后在指令destroy：

中删除它

<强>指令：

import { Directive, AfterViewInit, OnDestroy } from '@angular/core';

@Directive({ selector: '[myDirective]' })
export class ChangeColorDirective implements OnDestroy, AfterViewInit {
    ngAfterViewInit() {
        document.querySelector('body').classList.add('blue');

    }
    ngOnDestroy(): void {
        document.querySelector('body').classList.remove('blue');
    }
}

<强> styles.css的

.blue {
  background-color: blue
}

<强> DEMO

为Angular 4中的特定组件添加背景颜色到body标签

1 个答案: