Question

在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 的用法，我只是想问为什么在上述情况下属性绑定不起作用。最后，如果从.ts文件中获取值并将其添加到段落中'style'属性前面的html代码段中，则它只是一个简单的“内联CSS样式”。

Answer 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

Answer 2

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

在style属性上使用Angular4时，此属性绑定有什么问题？

2 个答案: