Где применить класс родительской темы при использовании: host-context (.theme_name) в Angular2? - PullRequest
Новая
       7

Где применить класс родительской темы при использовании: host-context (.theme_name) в Angular2?

0 голосов
/ 27 апреля 2018

Я создаю тематическое приложение Angular2. У меня есть множество вложенных компонентов, и я хотел бы изменить тему для всего приложения, изменив один родительский класс. Допустим, одна тема называется "theme1". Когда я применяю это к самому родительскому html-тегу, все вложенные дочерние компоненты будут переключать стиль с помощью: host-context, например так: 

:host-context(.theme1) .title-toc {
    font-family: "bookmania";
    font-weight: 700;
    font-size: 20pt;
    text-transform: uppercase;
    color: #a5a5a5;
}

Однако, куда поместить этот класс = "theme1"? Когда я установил его на <body>, он работал так, что сам код работает, но мне нужно динамически менять тему, чтобы она находилась внутри некоторого компонента Angular, где я могу использовать [ngClass]. Например, внутри AppComponent. Но когда я поместил его в app.component (например, router-outlet или любой другой тег обертки, который должен обернуть все мое приложение), он больше не работал.

Нужно ли как-то углубляться в :: ng-deep или что может быть не так?

Ответы [ 2 ]

0 голосов
/ 27 апреля 2018

: host-context () видит классы, примененные к документу body . Вы можете установить класс body с помощью JavaScript после загрузки приложения, например: 

var myclass = "my-theme-name";
document.querySelector('body').classList.add(myclass);

Таким образом, вы можете загрузить имя темы даже с сервера, а затем применить его к телу из любого компонента Angular2 через JS: 

:host-context(.my-theme-name) .my-theme-specific-style
0 голосов
/ 27 апреля 2018

Вы можете привязать атрибут class вашего корневого компонента следующим образом: 

export class AppComponent implements OnInit {

  @HostBinding('attr.class') mainClass = 'theme1';

  changeTheme(theme) {
    this.mainClass = theme;
  }

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

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

...