我將html作爲innerHtml傳遞給我的視圖。以下是我的看法風格不適用於Angular 2 Typescript中的innerhtml
<div [innerHTML]="someHtmlCode"></div>
如果我通過下面的代碼，它工作正常。
this.someHtmlCode = "<div><b>This is my HTML.</b></div>"
如果我通過下面的代碼包含顏色，它不工作。
this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';
你得到此行爲是正常的。添加到innerHTML的類被忽略，因爲默認情況下封裝是Emulated。這意味着Angular會阻止樣式在組件內部和外部截取。 您應該將組件中的封裝更改爲None。 通過這種方式，您可以在任何你想要的位置定義類：在styles之內或單獨的.css,.scss或.less樣式表（無所謂），Angular會自動將它們添加到DOM。
@Component({
selector: 'example',
styles: ['.demo {background-color: blue}'],
template: '<div [innerHTML]="someHtmlCode"></div>',
encapsulation: ViewEncapsulation.None,
})
export class Example {
private someHtmlCode = '';
constructor() {
this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>';
}
}
而不是內聯風格，我把風格放在類中。
不確定是否使用class是您的選擇或不是，但這裏是一個Plunker demo。
HTML：
this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>'
CSS：
.demo{ background-color: blue; }
它不工作，如果我的演示css文件較少，是否有任何區別？ – Chatra
這適用於如果css位於全局styles.css文件中，但不位於非全局css文件中的情況。如果有人能夠解釋這種差異，那將會很有幫助，但同時我想我會發表評論，讓其他人意識到取得這樣的成果取決於這些細節。 –
我也面臨着同樣的問題，但閱讀這下面的鏈接後，我想通了溶液中，並沒有使用管道
希望這將幫助你完成。
https://netbasal.com/angular-2-security-the-domsanitizer-service-2202c83bd90
如果我只通過沒有課程的樣式它不工作 – Chatra
你是對的，我找不到一個解決方案，使其工作:) 我會建議你，但不要使用內聯樣式，因爲它不是一個好習慣將它混合在模板中。 –