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

【问题标题】：Add background-color to body tag for particular component in Angular 4为Angular 4中的特定组件添加背景颜色到body标签
【发布时间】：2018-03-13 14:49:27
【问题描述】：

我在我的项目中使用 angular 4，并希望在单击某些元素时使用组件的 .ts 文件添加 <body> 标签的背景颜色。

但是，如果一旦颜色更改为蓝色，并且当我们单击任何其他组件时，蓝色仍然存在。单击任何其他组件时，我想删除蓝色。 <body> 的蓝色即使对于其他组件也保持蓝色。

【问题讨论】：

纯代码编写请求在 Stack Overflow 上是题外话——我们希望这里的问题与特定编程问题有关——但我们很乐意帮助您自己编写！告诉我们what you've tried，以及您遇到的问题。这也将有助于我们更好地回答您的问题。
我在 .ts 文件中使用了 jquery，在点击时改变颜色。只是想知道背景颜色是否仅适用于特定组件？并为其他组件点击移除
showWM(){ $('body').css('background-color', '#00bcd4'); } hideMobile(){ $('body').css('background-color', '#fff'); } @glennsl

标签： angular typescript

【解决方案1】：

您可以考虑添加一个指令并将其设置在组件的包装器 div 上。在指令“活动”时将特定类添加到主体，然后在指令销毁时将其删除：

指令：

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

【讨论】：

我尝试了这个解决方案，将指令添加到组件的包装器 div 并将样式添加到 css 文件。还有你在@Component 之前建议的@Directive 代码，但它抛出了错误，所以将它移到@Component 下面并且它没有给出错误，但代码仍然没有工作。它不会将蓝色添加到<body>，也不会将.blue 类添加到<body> 标签。
这里有一个演示：stackblitz.com/edit/…
我的组件的 css，我应该将它添加到 styles.css 吗？错误是我的错误，没关系:)
成功了，谢谢！还有一件事，默认情况下，我在该组件中添加了一些<div> 的单击颜色。有什么方法可以在单击时添加并在单击其他组件时删除？
非常感谢@Vega，它真的很有帮助！