组件从其他组件继承 CSS

Question

我的组件有问题： 1. 由于某种原因，我无法在 signin.component.css 中设置 html 和 body 的样式 我发现的解决方案是使用：

encapsulation: ViewEncapsulation.None ==> This works perfect

但是，当我更改视图时，例如：home，signin.component.css 被继承到 home 组件中。

难道是有什么问题吗？或者有人知道如何在 css 组件中设置 html 和 body 的样式吗？

提前致谢。

Answer 1

改变封装很少是一件好事。我将创建一个状态服务来更改组件的类和样式。它应该看起来像这样服务import { Injectable } from '@angular/core';@Injectable()export class StyleService {&nbsp; &nbsp; private className: Subject<string> = new Subject<string>();&nbsp; &nbsp; public className$: Observable<string> = this.className.asObservable();&nbsp; &nbsp; set(className: string): any {&nbsp; &nbsp; &nbsp; &nbsp; this.className.next(className);&nbsp; &nbsp; }}为了聆听变化...private sub: Subscription;...this.sub = this.styleService.className$&nbsp; &nbsp; .subscribe(class => {&nbsp; &nbsp; &nbsp; &nbsp; // do what you need to do&nbsp; &nbsp; })...ngOnDestroy() {&nbsp; &nbsp; // so you dont have memory leaks&nbsp; &nbsp; this.sub.unsubscribe();}当您想更改类时，您只需调用 set 函数即可。唯一缺少的是在主样式文件中声明类。如果您需要有一个 className 初始值，您可以使用BehaviorSubject，如下所示：private class: BehaviorSubject<string> = new BehaviorSubject<string>('className');

Answer 2

我自己发现了这个问题感谢所有帮助过我的人。问题是无法在组件 css 中编辑 html 和 body html 标签。正确的方法是删除 ViewEncapsultation 并将以下代码行添加到构造函数中。document.body.style.backgroundImage = 'url(\'../../../assets/images/background.jpg\')';document.body.style.backgroundSize = 'cover';document.body.style.backgroundRepeat = 'no-repeat';document.body.style.height = '100%';这是您在每个组件中设置 html 和 body 标签样式的方法。如果您需要设计整个背景的样式，这也适用。