Angular - 样式 ignored/overwritten
Angular - styles being ignored/overwritten
我遇到了样式未应用于元素的问题。如果我将样式信息添加到组件的样式参数，或在 styleUrls 参数中提供 CSS 文件，我将获得预期的结果。但是，未应用内联 HTML 样式。在下面的示例中，我尝试将红色背景应用于 div，但它保持白色。此 HTML 作为 Angular 组件的模板存在。
<div style="background: red;">test</div>
但是，如果我将 ngStyle="" 添加到元素中，例如：
<div style="background: red;" ngStyle="">test</div>
然后 Angular 将 div 的背景渲染为红色。
知道是什么导致 Angular 忽略这样的样式属性吗？
ngStyle和style是一样的，都是应用样式
您可以同时填充两者，并且两者都将应用样式（一个不会取消另一个，除非两者都试图做同样的事情），但是使用 [ngStyle] 您可以将它绑定到代码中的属性，如下所示：
[ngStyle]="{backgroundColor: getColor()}", getColor() 是一个延迟字符串或十六进制颜色的函数。
这个片段例如 应该 在 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 []?
我最终升级了我的所有库（从 Angular 4 到 Angular 5）并且没有更改代码，样式信息按预期呈现。
我遇到了样式未应用于元素的问题。如果我将样式信息添加到组件的样式参数，或在 styleUrls 参数中提供 CSS 文件，我将获得预期的结果。但是，未应用内联 HTML 样式。在下面的示例中，我尝试将红色背景应用于 div，但它保持白色。此 HTML 作为 Angular 组件的模板存在。
<div style="background: red;">test</div>
但是，如果我将 ngStyle="" 添加到元素中，例如：
<div style="background: red;" ngStyle="">test</div>
然后 Angular 将 div 的背景渲染为红色。
知道是什么导致 Angular 忽略这样的样式属性吗？
ngStyle和style是一样的，都是应用样式 您可以同时填充两者，并且两者都将应用样式（一个不会取消另一个，除非两者都试图做同样的事情），但是使用 [ngStyle] 您可以将它绑定到代码中的属性，如下所示： [ngStyle]="{backgroundColor: getColor()}", getColor() 是一个延迟字符串或十六进制颜色的函数。
这个片段例如 应该 在 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 []?
我最终升级了我的所有库（从 Angular 4 到 Angular 5）并且没有更改代码，样式信息按预期呈现。