警告：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> 

這種方式不需要消毒。