angular - 警告 : SafeValue must use [property]=binding

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>

但在添加 sanitizer 后，我收到以下消息:

SafeValue must use [property]=binding:

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

Answer 1

{{}} 仅用于字符串绑定(bind)。净化后的值不再是纯字符串，如果您使用 {{}}，净化标记将被移除。

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

但更有棱 Angular 的方法是使用 Angular 绑定(bind)或指令

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

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

这样就不需要 sanitizer 了。