Question

将calc（）绑定到style.height，style.width in angular？

的正确方法是什么？

我有：

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

然后回来：

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

似乎'（'没有被转义。

Answer 1

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

Angular 2, Adding calc() as inline style. Unsafe interpolation using parentheses

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代替：

cmake -G "MSYS Makefiles" -DCMAKE_INSTALL_PREFIX=C:\Users\pro12\Desktop\lib\libwebsockets

Answer 3

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

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

Answer 4

如果你想在内联样式中使用 calc() 然后试试这个高度或宽度

对于高度：

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

对于宽度：

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

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

4 个答案: