Angular 2 - innerHTML样式

Question

我从HTTP调用中获取大量HTML代码.我将HTML块放在一个变量中并使用[innerHTML]将其插入到我的页面中,但我无法设置插入的HTML块的样式.有没有人有任何建议如何实现这一目标？

@Component({selector: 'calendar',
template: '<div [innerHTML]="calendar"></div>',
providers:[HomeService], 
styles: [` 
h3 {color:red;}
`})

我想要设置样式的HTML是变量"calendar"中包含的块.

Answer 1

更新2 ::slotted

::slotted 现在所有新浏览器都支持它,并且可以与`ViewEncapsulation.ShadowDom一起使用

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

更新1 :: ng-deep

/deep/被弃用并替换为::ng-deep.

::ng-deep 也已标记为已弃用,但尚无替代品.

当ViewEncapsulation.Native所有浏览器都正确支持并支持影子DOM边界的样式时,::ng-deep可能会停止使用.

原版的

Angular将各种CSS类添加到它添加到DOM的HTML中,以模拟shadow DOM CSS封装,以防止组件内外流失的样式.Angular还会重写您添加的CSS以匹配这些添加的类.对于使用[innerHTML]这些类添加的HTML ,不会添加,并且重写的CSS不匹配.

作为一种解决方法尝试

• 用于添加到组件的CSS

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

• 为CSS添加 index.html

/* body /deep/ mySelector { */
body ::ng-deep mySelector {
  background-color: green;
}

>>>(和等效/deep/,但/deep/与上海社会科学院工作得更好),并::shadow在2.0.0-beta.10加入.它们类似于shadow DOM CSS组合器(不推荐使用),只能使用encapsulation: ViewEncapsulation.EmulatedAngular2中的默认值.它们可能也可以使用,ViewEncapsulation.None但之后只会被忽略,因为它们不是必需的.在支持跨组件样式的更高级功能之前,这些组合器只是一种中间解决方案.

另一种方法是使用

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})

对于阻止CSS的所有组件(取决于您添加CSS的位置以及要设置样式的HTML的位置 - 可能是应用程序中的所有组件)

更新

示例Plunker

Answer 2

您需要遵循的简单解决方案是

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer){}

transformYourHtml(htmlTextWithStyle) {
    return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
}

Answer 3

我们经常从 CMS 中提取内容作为[innerHTML]="content.title". 我们将必要的类放置在应用程序的根styles.scss文件中，而不是组件的 scss 文件中。我们的 CMS 特意去掉了内联样式，因此我们必须准备好作者可以在其内容中使用的类。请记住，在模板中使用{{content.title}}不会从内容中呈现 html。