此原理圖會把應用程式中 NgStyle 指令的用法,遷移為 style 繫結。 它只會遷移被認為可安全遷移的用法。
使用以下指令執行此原理圖:
ng generate @angular/core:ngstyle-to-style
只有單一鍵的物件,會變成對該單一樣式屬性的繫結。
遷移前
<div [ngStyle]="{'background-color': 'red'}"></div>
遷移後
<div [style.background-color]="'red'"></div>
有多個鍵的物件,會變成單一個 [style] 繫結。
遷移前
<div [ngStyle]="{'color': 'blue', 'font-weight': 'bold'}"></div>
遷移後
<div [style]="{'color': 'blue', 'font-weight': 'bold'}"></div>
設定選項
這項遷移支援幾個選項,可依你的具體需求微調遷移方式。
--best-effort-mode
依預設,遷移會避開以物件參照形式使用 NgStyle 的用法。
啟用 --best-effort-mode 旗標後,繫結到物件參照的 ngStyle 實例也會被遷移。
這樣遷移可能不安全,例如被繫結的物件遭到修改時。
<div [ngStyle]="styleObject"></div>
改為
<div [style]="styleObject"></div>