警告：SafeValue必须使用[property] = binding

Question

我试图以这种方式将元素getBoundingClientRect（）发送到我的组件：

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

在我的组件html中，我这样做，因为我得到了一条说明它是＆＃34;不安全＆＃34;

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

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

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

  

SafeValue必须使用[property] = binding：

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

Answer 1

{{}}仅用于字符串绑定。已清理的值不再是普通字符串，如果您使用{{}}，则会删除清理标记。

您需要清理整个样式值，然后将其绑定到[style]="..."

但更有棱角的方式是使用Angular绑定或指令

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

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

这样就不需要消毒了。