如何在Angular4中添加由用戶輸入定義的自定義CSS？

我想給我的應用程序用戶設置純CSS樣式的可能性，這些樣式定義應立即應用於某些HTML元素。如何在Angular4中添加由用戶輸入定義的自定義CSS？

例如，我在我的組件綁定到一個模型，一個textarea：

<textarea #customCss></<textarea>

在同一組件中，我定義了一個HTML元素爲HTML元素，我想給用戶的可能性分配純CSS，並允許用戶立即預覽樣式元素。所以基本上，我希望像下面這樣（沒有工作，因爲樣式屬性爲只讀）：

<div style="{{ customCss.value }}">CUSTOM STYLED DIV</div>

因此，當用戶在文本區域進入background:black;color:red;，我希望的是HTML的風格的元素會被渲染爲：

<div style="background:black;color:red;">CUSTOM STYLED DIV</div>

我看不出有任何機會在這裏直接使用NG風格指令的，因爲它會期待一些JSON代碼，而不是簡單的CSS代碼。

那麼我該如何解決Angular4中的這個問題呢？

來源

2017-08-04 Tom

奈爾斯建議讓我回到正確的軌道上，感謝。

我已經嘗試過[attr.style]="..."之前但沒有成功，但問題是生成的CSS呈現「不安全」（至少在Safari中），請參閱this Github問題。

因此，我使用DomSanitizer編寫了自己的Pipe以獲得這項工作。下面是代碼：

import { Pipe, PipeTransform } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser'; 

@Pipe({name: 'safeStyle'}) 
export class SafeStylePipe implements PipeTransform { 
    constructor(private sanitizer: DomSanitizer) {} 

    transform(style) { 
     return this.sanitizer.bypassSecurityTrustStyle(style); 
    } 
}

我們的定製管然後可以使用像往常一樣：

<div [attr.style]="customCss.value|safeStyle">CUSTOM STYLED DIV</div>

來源

2017-08-04 17:00:45 Tom

也許最簡單的方法是隻綁定到屬性：

<div [attr.style]="customCss.value">CUSTOM STYLED DIV</div>

來源

2017-08-04 14:46:38

謝謝，向我指出了正確的方向，我張貼的最終解決方案。 – Tom

如何在Angular4中添加由用戶輸入定義的自定義CSS？

回答

相關問題