在样式属性上使用 Angular4 中的这个属性绑定有什么问题？答案

【问题标题】：What is wrong with this property binding in Angular4 while using it on style property?在样式属性上使用 Angular4 中的这个属性绑定有什么问题？
【发布时间】：2018-09-15 22:12:26
【问题描述】：

在 Angular4 中，视图 (.html) 上的 属性绑定 从逻辑文件 (.ts) 中获取值

这在代码中效果很好：

<img [src]="sourceValue">

这在代码中也很有效：

<button [disabled]="isDisabled">

为什么这不起作用？

<p [style]="paragraphStyle"> This is a paragraph.</p>

abc.component.ts

isDisabled:boolean = true; 
sourceValue:string = "./assets/hermione.jpg"; 
paragraphStyle:string = "background:red; color:yellow";

我知道ngStyles和ngClass的用法，我只是想问一下为什么在上述情况下属性绑定不起作用。最后 --- 只是一个简单的“内联 CSS 样式”，如果值取自 .ts 文件并添加到段落中 'style' 属性前面的 html sn-p。

【问题讨论】：

你在这里做了你不应该做的事情，组件中的 TypeScript 文件用于在 html 视图和服务之间编组数据，而 html 文件用于演示。如果您的 TypeScript 中有图像名称和样式，那么您正在错误地考虑关注点分离。

标签： javascript angular property-binding

【解决方案1】：

这是因为安全措施：

@Angular docs
Angular 定义了以下安全上下文：

将值解释为 HTML 时使用 HTML，例如，当
绑定到 innerHtml。
将 CSS 绑定到样式属性时使用样式。
URL 用于 URL 属性，例如<a href>.
资源 URL 是一个将作为代码加载和执行的 URL，例如，<script src>。

修复方法是使用 bypassSecurityTrustStyle() 预先清理值 - 绕过安全性并相信给定值是安全样式值 (CSS)。

@Angular docs

警告：使用不受信任的用户数据调用此方法会暴露您的应用于XSS安全风险！

组件：

import { Component, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  paragraphStyle;
constructor(private _sanitizer: DomSanitizer){ 

  this.paragraphStyle=this._sanitizer.bypassSecurityTrustStyle("background-color:red");
}

HTML

<p [style]="paragraphStyle"> This is a paragraph.</p>

注意：

样式属性名称使用破折号。例如 font-weight ,background-color

Live Demo

【讨论】：

【解决方案2】：

我认为你可以做到，但你必须这样做： [style.background]="'red'"

【讨论】：

谢谢，但问题又出现了，为什么不直接从 .ts 中获取价值并像查看部分的其他案例一样替换？这将是一个“简单的内联样式”。
不知道，但我知道它并不能真正按照您希望的方式工作，它必须对样式规则以及它们如何在渲染器中应用它们。最好只使用 ngStyles 或 ngClass。顺便说一句，您应该更喜欢使用类，因为内联样式不会缓存在浏览器中。
通过这种方法，您实际上可以从 ts 中获取值，您只需将 'red' 替换为属性名称。像这样：[style.background]="redVariable"
您是否收到任何错误或警告？ “从技术上讲，Angular 将名称与指令输入匹配，该名称是指令输入数组中列出的属性名称之一或用@Input() 修饰的属性。这些输入映射到指令自己的属性。” --> “如果名称与已知指令或元素的属性不匹配，Angular 会报告“未知指令”错误。”
@NerijusPamedytis 看看我的答案以获得清晰的图片：)