Angular 2 - innerHTML 样式

Question

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

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

我想要设置样式的 HTML 是包含在变量“calendar”中的 block 。

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 中，以模拟影子 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，这是 Angular2 中的默认设置。它们也可能与 ViewEncapsulation.None 一起使用，但随后仅被忽略，因为它们不是必需的。 在支持更高级的跨组件样式功能之前，这些组合器只是一个中间解决方案。

另一种方法是使用

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

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

更新

Example Plunker