Angular 2 - innerHTML 样式

小编典典

Angular 2 - innerHTML 样式

all

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

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

我要设置样式的 HTML 是变量“日历”中包含的块。

阅读 82

2022-06-29

共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 以匹配这些添加的类。对于使用这些类添加的 HTML [innerHTML]，未添加并且重写的 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
中添加。它们类似于 shadow DOM CSS 组合器（已弃用），并且仅适用encapsulation: ViewEncapsulation.Emulated于 Angular2
中的默认值。它们可能也可以使用，ViewEncapsulation.None但只是因为没有必要而被忽略。在支持跨组件样式的更高级功能之前，这些组合器只是一个中间解决方案。

另一种方法是使用

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

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

更新

示例 Plunker

2022-06-29