更新组件范围之外的样式 - Angular 2

时间:2016-10-19 12:57:21

标签: css angular angular2-directives

我正在使用Angular 2创建一个非常简单的Web应用程序,要求用户输入RGB颜色代码。用户输入代码后,页面背景应更改为输入的颜色。

目前,这就是我在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),但我只是想确保这是通过typescript和Angular 2访问<body>元素的最有效方式。

1 个答案:

答案 0 :(得分:1)

您的回答是对的,我们无法使用类选择器动态更改元素的样式。