2016-10-19 5 views
1

Я создаю очень простое веб-приложение, использующее Angular 2, которое запрашивает у пользователя ввод цветового кода RGB. После ввода пользователем кода, фон страницы должен измениться на введенный цвет.Обновление стилей за пределами области видимости - Angular 2

В настоящее время, это то, что у меня есть в моем app.component.ts файле:

/** 
    * Fired when the user clicks the #update-background button. This function will read the current input values and set the background color to these values. 
    * 
    * @param rgb: RGB object bound to the input fields. Holds the rgb(,,) values for the new background 
    */ 
    updateBackgroundColor(rgb) { 
    // 1. Construct the new background color 
    var updatedBackgroundColor = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; 

    // 2. Set the background of the <body> to the new background color. Right now I am using direct DOM manipulation because I could not find a way to access the <body> via typescript. 
    document.body.style.background = updatedBackgroundColor; 
    } 

Является ли это лучший способ обновить стиль <body> элемента? Код в настоящее время работает (demo), но я просто хочу быть уверенным, что это самый эффективный способ доступа к элементу <body> с помощью машинописных и угловых 2.

ответ

1

Ваш ответ правильный, мы не можем динамически изменять стиль элемент, использующий селектор классов.

+0

Если вам нужно уточнить, используйте инструмент chrome dev и проверьте сайт, например apple.com. Эти сайты обновляют анимацию в атрибуте стиля элемента. – Ash