Angular：在样式绑定中使用calc的正确方法

Question

将calc（）绑定到angular。中的style.height，style.width的正确方法是什么？

我有：

[style.height]="calc(100% - 57px)"

然后回来：

Error: Missing expected ) at column 14 in [calc(100% - 4px)] 

似乎'（'没有被转义。

Answer 1

我知道OP表示他们放弃了这一点，但对于遇到此问题的其他人（对我来说，这在Google上排名最高），这里的答案回答了这个问题：

Angular 2，添加calc（）作为内联样式。使用括号的不安全插值

DOM Sanitizer正在删除它，因此必须绕过它。

  import {DomSanitizer} from "@angular/platform-browser";

  constructor(private sanitizer: DomSanitizer) {
      this.someHeight = this.sanitizer.bypassSecurityTrustStyle("calc(100% - 57px)");
  }

  public someHeight: string;

或直接在模板上：

[style.height]="sanitizer.bypassSecurityTrustStyle('calc(100% - 57px)')"

Answer 2

您也可以尝试使用 ngStyle 代替：

[ngStyle]="{'height': 'calc(100% - 57px)'"}

Answer 3

它需要是一个字符串，使用''

[style.height]="'calc(100vh - ' + (checkedTaskTracker.checkedTasks.length > 0 ? '240px': '171px') + ')'"