时间戳

首页 > 解决方案 > 组件从其他组件继承 CSS

html - 组件从其他组件继承 CSS

问题描述

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

encapsulation: ViewEncapsulation.None ==> This works perfect

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

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

提前致谢。

标签： htmlcssangular

解决方案

改变封装很少是一件好事。我会创建一个状态服务来更改组件的类和样式。

它应该看起来像这样

服务

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');

推荐阅读