Компоненты наследуют CSS от других компонентов

Question

У меня проблема с моими компонентами: 1. По какой-то причине я не могу ввести html и body в signin.component. css Решение, которое я нашел, использовало:

encapsulation: ViewEncapsulation.None ==> This works perfect

Однако, когда я меняю представление, например: home, signin.component. css наследуется в компонент home.

Что-то не так с этим? Или кто-нибудь знает, как оформить html и тело в css компонентах?

Заранее спасибо.

Answer 1

Я нашел проблему сам,

Спасибо всем, кто помог мне.

Проблема заключалась в том, что невозможно редактировать html и теги body html в компоненте css. Правильный способ сделать это - удалить 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 в каждом компоненте. Это также работает, если вам нужно стилизовать весь фон.

Answer 2

Изменение инкапсуляции редко бывает полезным. Я бы создал службу состояний, которая изменяет классы и стили для компонентов.

Это должно выглядеть примерно так:

service

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