Angular4 - 样式绑定中的计算

Question

无论如何你可以在 Angular 4 中的样式绑定目标中进行计算吗？

我试过了

[style.width]="{{1+1}}"

[style.width]="{{1+1}}px"

[style.width]="{{1px+1px}}"

Answer 1

您可以使用 [style.width.px]="1 + 1" 来实现这一点。

Answer 2

这应该有效

   [style.width]="1+1+'px'"

基本上，当你使用 [] 时，必须是表达式，你不应该将 {{}} 放在值中，这是使用属性绑定时的一般 Angular2 规则.

[style.width]="{{1+1}}"   is wrong because of `{{}}` in the value

Answer 3

[style.height.px]="200"
[style.height.px]="200 + 50"
[style.height.px]="_commonService.screenHeight"
[style.height.px]="_commonService.screenHeight + 50"
[style.height.px]="_commonService.screenHeight - (isHomePage == true?80:140)"
/* Other Examples **/
[ngStyle]="{'margin-top': isHomePage == true ? '0px' : '60px' }"

Answer 4

您应该避免在视图中进行样式计算。只需创建一个函数来处理此计算，并且只 return 视图中的结果。

Angular4 - 样式绑定中的计算

Angular4 - Calculation in style bindings

binding

styles

target

calculation

angular