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

Posted

技术标签:

【中文标题】在组件范围之外更新样式 - Angular 2【英文标题】:Updating styles outside of a components scope - Angular 2 【发布时间】:2017-03-01 03:11:49 【问题描述】:

我正在使用 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;
  

这是更新&lt;body&gt; 元素样式的最佳方式吗?代码目前正在运行 (demo),但我只想确定这是通过 typescript 和 Angular 2 访问 &lt;body&gt; 元素的最有效方式。

【问题讨论】:

【参考方案1】:

你的回答是对的,我们不能使用类选择器动态改变元素的样式。

【讨论】:

如果您需要进一步说明,请使用 chrome 开发工具并检查类似 apple.com 的网站。这些网站在元素的样式属性中有动画更新。

以上是关于在组件范围之外更新样式 - Angular 2的主要内容,如果未能解决你的问题,请参考以下文章

Angular 组件如何使用由用户定义的样式表?

如何在 Angular 1.5 组件中监听范围事件?

Angular2:观察角度之外的外部变量

Angular 1.5 组件通过 ngRoute 更新父控制器

Angular:在 Chrome 的严格模式之外尚不支持块范围的声明

编辑我们的第一个Angular组件