1

在 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 样式”。

4

2 回答 2

2

这是因为安全措施：

@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>

笔记：

对于样式属性名称，请使用破折号。例如，字体粗细、背景颜色

Live Demo

于 2018-09-16T00:33:54.923 回答
1

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

于 2018-09-15T22:17:33.933 回答