角度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

Angular将所有类型的CSS类添加到HTML中，它添加到DOM中，以模拟阴影DOM CSS封装，以防止组件中的样式溢出。Angular还重写您添加的CSS以匹配这些添加的类。对于使用[innerHTML]添加的HTML，这些类不会添加，而且重写的CSS不匹配。

作为变通办法

• 对于添加到组件的CSS

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

• 对于添加到index.html
的CSS

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

>>（以及等效的/deep/但/deep/与SASS一起工作更好）和::shadow在2.0.0-Beta.10中添加了。它们类似于影子DOM CSS组合子（不推荐使用），并且只使用封装:viewencapsulation.emulated，这是Angular2中的默认值。它们可能还与viewencapsulation.none一起工作，但由于它们不是必需的，因此只会被忽略。在支持跨组件样式化的更高级特性之前，这些组合器只是一种中间解决方案。

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

柱塞示例