Angular 2 – innerHTML样式

我从HTTP调用中获取大量的HTML代码。 我把HTML块放在一个variables中，并使用[innerHTML]将其插入到我的页面中，但是我无法对插入的HTML块进行样式设置。 有没有人有任何build议，我可以做到这一点？

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

我想要的样式的HTML是包含在variables“日历”中的块。

Answer 1

update :: ng-deep

/deep/被弃用，并被::ng-deep取代。

::ng-deep也已被标记为废弃，但目前还没有可用的替代品。

当所有浏览器都支持ViewEncapsulation.Native ，并且支持阴影DOM边界的样式时， ::ng-deep可能会被终止。

原版的

Angular将各种CSS类添加到它添加到DOM的HTML中，以模拟阴影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/ SASS更好）和::shadow被添加到2.0.0-beta.10。 它们类似于阴影DOM CSS组合器（已弃用），只能用于encapsulation: ViewEncapsulation.Emulated ，这是encapsulation: ViewEncapsulation.Emulated中的默认设置。 他们也可能与ViewEncapsulation.None工作，但只是被忽略，因为它们不是必需的。 这些组合器只是一个中间解决scheme，直到支持跨组件样式的更高级function。

另一种方法是使用

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

对于阻止你的CSS的所有组件（取决于你添加CSS的位置以及你想要的HTML样式 – 可能是你的应用程序中的所有组件）

更新

示例Plunker