警告：SafeValue必须使用[属性] =结合

Question

我想一个元素getBoundingClientRect（）这种方式发到我的组件：

<object [fromTop]="element.getBoundingClientRect().top"></object> 

在我的组件的HTML我这样做，因为我得到了一份说明，这是 “不安全”

this.fromTop = this.sanitizer.bypassSecurityTrustStyle(this.fromTop); 

<div 
style="position:absolute;top:{{fromTop}}px;">Top:{{fromTop}}</div> 

但添加消毒剂我收到以下消息后：

SafeValue必须使用[属性] =结合：

怎么了？我如何让我的对象处于等于顶部的绝对位置：{{fromTop}}px?

Answer 1

{{}}仅用于字符串绑定。消毒后的价值不再是简单的字符串，如果您使用{{}}，则消毒标记被删除。

你需要消毒的整体风格值，然后将其绑定到[style]="..."

但更angulary办法是采用了棱角分明的绑定或指令

<div [style.top.px]="fromTop" [style.position]="'absolute'">Top:{{fromTop}}</div> 

<div [ngStyle]="{top: fromTop + 'px', position: 'absolute'}">Top:{{fromTop}}</div> 

这种方式不需要消毒。