组件从其他组件继承 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 {

    private className: Subject<string> = new Subject<string>();

    public className$: Observable<string> = this.className.asObservable();

    set(className: string): any {

        this.className.next(className);

    }

}

为了聆听变化

...

private sub: Subscription;

...

this.sub = this.styleService.className$

    .subscribe(class => {

        // do what you need to do

    })

...

ngOnDestroy() {

    // so you dont have memory leaks

    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 标签样式的方法。如果您需要设计整个背景的样式，这也适用。