Angular 6: Как динамически изменить цвет фона страницы - PullRequest
Новая
       21

Angular 6: Как динамически изменить цвет фона страницы

0 голосов
/ 19 сентября 2018

Я работаю в приложении Angular 6 (с Bootstrap 4) и мне нужно изменить цвет фона страницы в зависимости от того, на какую страницу заходит пользователь.По умолчанию белый, но для экрана входа в систему и регистрации цвет страницы должен быть синим.

То, что я нашел до сих пор:

  • в ngAfterViewInit () с использованием this.elementRef.nativeElement.ownerDocument: этот подход делает приложение более уязвимым для атак XSS, и я хочу этого избежать.
  • Установите для параметра «Инкапсуляция вида» значение «Нет» в app.component.ts: таким образом, я могу установить цвет тела в app.component., это на 1 шаг вперед.

Итак, теперь я имею в своем app.component.css: 

body {
  background-color: blue;
}

Вопрос: Как я могу изменить это значение цвета (в приложении.component) используя переменную?

  • С помощью [ngStyle] я не могу получить цвет фона тела.
  • Может быть, с помощью переменной css?но как я могу изменить значение этой переменной css динамически?
  • Я новичок в Sass, но может ли это предложить решение?

Мой вопрос отличается отдругой вопрос на эту тему, так как мне нужно иметь возможность динамически изменять значение цвета.

Ответы [ 3 ]

0 голосов
/ 19 сентября 2018

используйте render2 и установите класс в тело, используя объект документа

app.component.ts 

constructor(private renderer: Renderer2) {
this.renderer.addClass(document.body, 'body-class');
}

Примечание: если вы переключаете классы, просто удалите предыдущийкласс перед назначением нового класса

0 голосов
/ 19 сентября 2018

Мой любимый подход к выполнению подобных вещей - добавить класс в тег html в зависимости от маршрута.Например, у нас есть некоторый код в нашем базовом компоненте макета (вы можете поместить его в свой корневой компонент), который делает это внутри ngOnInit: 

let wrapper = ''
const path = this.activatedRoute.snapshot.routeConfig.path
wrapper += this.tidyPath(path)
if (wrapper !== '') wrapper += '-'
const childPath = this.activatedRoute.snapshot.firstChild.routeConfig.path
wrapper += this.tidyPath(childPath)
this.routeWrapperCssClass = wrapper
$('html').addClass(this.routeWrapperCssClass)

Это добавит класс к вашему HTML-тегу, чтобы он выгляделвот так (хотя вам, возможно, придется настроить этот код в соответствии с вашим приложением): 

<html class="registration">
    ....
</html>

Класс будет мгновенно обновляться при каждом изменении маршрута.

Теперь вы можете сделать это в своемглавная таблица стилей: 

body {
    background-color: pink;
}

html.registration body {
    background-color: yellow;
}

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

.navbar {
  display: block;
}

html.registration .navbar {
  display: none;
}

Поскольку вы знаете, по какому маршруту вы находитесь навсякий раз, когда у вас есть полный контроль над CSS.

PS вы можете использовать render2 вместо jQuery для манипулирования DOM - см. эту статью ... https://alligator.io/angular/using-renderer2 ... никогда не использовал его самраньше, но почти идентичен синтаксису jQuery - спасибо Pratap AK за этот ответ

0 голосов
/ 19 сентября 2018

Почему бы просто не определить отдельный класс на основе другого цвета фона?Например: 

.blue {
  background: blue
}

.green {
  background: green
}

.grey {
  background: grey
}

И затем установите эти классы на body, используя ng-class или ngClass, независимо от того, какое соглашение вы используете на основе страницы.Это должно быть довольно легко реализовать.

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

Похожие темы

...