Angular - 样式被忽略/覆盖

Question

我遇到了未将样式应用于元素的问题。如果我在组件的样式参数中添加样式信息，或者在 styleUrls 参数中提供 CSS 文件，我会得到预期的结果。但是，没有应用内联 HTML 样式。在下面的示例中，我尝试将红色背景应用于 div，但它保持白色。此 HTML 作为 Angular 组件的模板存在。

<div style="background: red;">test</div>

但是，如果我将 ngStyle="" 添加到元素中，例如：

<div style="background: red;" ngStyle="">test</div>

然后 Angular 将 div 的背景渲染为红色。

任何想法是什么导致 Angular 忽略这样的样式属性？

Answer 1

ngStyle 和 style 是一样的，都是应用样式 您可以同时填充，并且都将应用样式（一个不会取消另一个，除非两者都尝试做同样的事情），但是使用 [ngStyle] 您可以将其绑定到代码中的属性，如下所示： [ngStyle]="{backgroundColor: getColor()}"，getColor() 是一个延迟字符串或十六进制颜色的函数。

这个 sn-p 例如 应该在 angular 2 中有效（工作中无法验证）

<div style="background-color: black;" [ngStyle]="{color: white}">text with back background and white font color</div>

Why the ngStyle directive is declared into the []?

Answer 2

我最终升级了我的所有库（从 Angular 4 到 Angular 5）并且没有更改代码，样式信息按预期呈现。