Angular 2 - innerHTML样式-Java 学习之路

109

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

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

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

1 回答

217
update 2 ::slotted

::slotted 现在受到所有新浏览器的支持，可以与`ViewEncapsulation.ShadowDom一起使用

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

update 1 ::ng-deep

/deep/ 已弃用，已替换为 ::ng-deep .

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

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

original

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

作为一种解决方法尝试
- for CSS添加到组件中
```
/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}
```
- for 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的位置 - 可能是应用程序中的 all 组件）

Update

Example Plunker
回复于 2024-05-01T17:28:21+08:00

Angular 2 - innerHTML样式

1 回答

相关问题