angular 5 - 绑定完整样式表达式答案

【问题标题】：angular 5 - bind full style expressionangular 5 - 绑定完整样式表达式
【发布时间】：2020-09-25 19:32:22
【问题描述】：

我不会为 html 元素绑定完整的样式表达式。

例如：home.ts中这样的表达式：

divStyle:string = "top:50%;bottom:50%;color:green;";

在 home.html 中，我尝试了以下方法将样式绑定到元素：

<div class="preloader" [attr.style]="divStyle">

或

<div class="preloader" [style]="divStyle">

或

<div class="preloader" [ngStyle]="divStyle">

但它不起作用。

任何机构都知道是否可以这样做？

【问题讨论】：

标签： angular ng-style

【解决方案1】：

由于安全限制；您需要首先使用 DOM sanitizer sanitize 样式字符串：

组件：

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  divStyle: string = 'background-color: red; font-weight: 600;';

  constructor(private sanitizer: DomSanitizer){}

  sanitize(style: string) {
    return this.sanitizer.bypassSecurityTrustStyle(style);
  }
}

模板：

<div [style]="sanitize(divStyle)">
  Content
</div>

工作示例： https://stackblitz.com/edit/angular-pkjd2q

理想情况下，您应该使用不同的方法，例如 NgStyle directive，它需要一个样式对象，而不是字符串。您需要执行以下操作：

组件：

divStyle: string = { top: "50%", bottom: "50%", color: "green" };

模板：

<div [ngStyle]="divStyle"></div>

【讨论】：

【解决方案2】：

也许可以试试这个表格：

<div class="preloader" 
    [ngStyle]="{'top': '50%',
                'bottom': '50%',
                'color': 'green'}">

【讨论】：

我知道这种方式。但我不会只用一个属性来做。

【解决方案3】：

正如@Gorka Hernandez 所说，使用管道可能会更优雅，例如：

shared.pipe.ts

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}

  public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default: throw new Error(`Invalid safe type specified: ${type}`);
        }
  }

}

custom.pipe.ts

@Pipe({
  name: 'severityColor'
})
export class SeverityColorPipe extends SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer){
    super(sanitizer)
  }

  transform(severity: number): SafeStyle {
    switch (severity) {
      case 9:
      case 10:
        return super.transform('background-color: rgba(255, 165, 0, .2)', 'style');
    
      default:
        break;
    }
  }

}

用法：

custom.html

<div *ngFor="let severity of severities">
    <div [style]="severity | severityColor"></div>
</div>

【讨论】：