我将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
你是对的，我找不到一个解决方案，使其工作:) 我会建议你，但不要使用内联样式，因为它不是一个好习惯将它混合在模板中。 –