Angular 2+: стиль компонента продолжает влиять на другие компоненты - PullRequest
Новая
       1

Angular 2+: стиль компонента продолжает влиять на другие компоненты

0 голосов
/ 03 января 2019

Получил домашний компонент с background-color:red, записанным в его scss, а затем получил пользовательский компонент с background-color:green, записанным в его scss. Я запускаю свое приложение, нахожусь дома, получил красный фон, зашел на страницу пользователя, получил зеленый фон. Работает так, как должно ... но теперь, когда я возвращаюсь, фон моего домашнего компонента все еще зеленый. Все компоненты имеют ViewEncapsulation.None. Если я запускаю навигацию со страницы пользователя, происходит то же самое, но цвета фона vica-vera.

Я всегда понимал, что смысл стиля компонента заключается в том, чтобы влиять только на его компонент, а не на другие. Разве это не так, как это должно работать?

Edit: если я установил ViewEncapsulation.Emulated, я не вижу стилизации из применяемого scss-файла стиля компонента, поэтому обе страницы имеют белый фон. Вот так выглядит файл моего домашнего компонента: 

import { Component, OnInit, ViewEncapsulation } from '@angular/core';


@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss'],
    encapsulation: ViewEncapsulation.Emulated,
})

export class HomeComponent implements OnInit {

    ngOnInit() {

    }

}

Редактировать: Вы видите, что моя проблема заключалась в том, что я устанавливал цвет фона для <body>, но тело не является частью шаблона, поэтому encapsulation: ViewEncapsulation.Emulated и таблицы стилей компонентов не влияют на него.

Ответы [ 2 ]

0 голосов
/ 03 января 2019

Причина, по которой он никогда не меняется на ожидаемый цвет.

Потому что первый компонент загружает свой CSS в DOM и остается их до тех пор, пока окно не будет закрыто. И причина, по которой второй раз изменения маршрута верен, потому что он переопределит ваши классы, идентификаторы или стили тегов, которые существуют один раз во втором Компонент отображается.

Поэтому я предлагаю использовать события маршрутизатора и определять каждый путь, для которого вы хотите изменить цвет, и изменить класс элемента body.

пример: 

export class AppComponent {
  name = 'Angular';

  constructor(private router: Router) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        console.log(event.url)
        if (event.url == '/') {
          document.body.className = 'home';
        } else if (event.url == '/test') {
          document.body.className = 'test';
        } else if (event.url == '/hello') {
          document.body.className = 'hello';
        }
      }
    });
  }
}

См. Стека бликов ниже для полного руководства:

https://stackblitz.com/edit/angular-svktf1

0 голосов
/ 03 января 2019

Вам необходимо инкапсулировать ваше представление в Emulated, чтобы ваш компонентный декоратор выглядел следующим образом - 

@Component({
    // ...
    encapsulation: ViewEncapsulation.Emulated,
})

Это будет охватывать ваши стили только для конкретного компонента.

Здесь более подробная информация о View Encapsulation

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...