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

Question

我正在使用 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），但我只想确保这是通过打字稿和 Angular 2.

访问 <body> 元素的最有效方式

Answer 1

您的回答是正确的，我们不能使用 class 选择器动态更改元素的样式。

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

Updating styles outside of a components scope - Angular 2

css

angular2-directives

angular