时间戳

首页 > 解决方案 > Angular 2+ 中的复杂和多种变换样式

angular - Angular 2+ 中的复杂和多种变换样式

问题描述

如何在 Angular 2+ 中添加多个内联变换样式？

这有效：

[style.transform]="'rotate(45deg)'"

但是当我添加超过 1 种样式时，它不起作用：

[style.transform]="'rotate(45deg) translateX(10px)'"

我在哪里可以找到支持style.*指令的参考？这样的事情可能吗？

[style.transform.translateX.px] = "10"
[style.transform.rotate.deg] = "45"

标签： angularcss-transforms

解决方案

以下是两种有效的方法：

方法 1 - 使用ngStyle：

[ngStyle]="{'transform': 'rotate(45deg) translateX(10px)'}"

方法 2 - 清理传递给的值[style.transform]：

[style.transform]="myTransform"

import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

get myTransform(): SafeStyle {
  return this._sanitizer.bypassSecurityTrustStyle("rotate(45deg) translateX(10px)");
}

看到这个 stackblitz。

如问题中所述，以下语法不起作用（请参阅此演示）：

[style.transform]="'rotate(45deg) translateX(10px)'"

样式属性已从 HTML 输出中删除，并触发此警告：

警告：清理不安全的样式值 rotate(45deg) translateX(10px)（参见http://g.co/ng/security#xss）。

推荐阅读