Angular 2 - innerHTML 样式 [英] Angular 2 - innerHTML styling

问题描述

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

I am getting chunks of HTML codes from HTTP calls. I put the HTML blocks in a variable and insert it on my page with [innerHTML] but I can not style the inserted HTML block. Does anyone have any suggestion how I might achieve this?

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

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

The HTML that I want to style is the block contained in the variable "calendar".

推荐答案

更新 2 ::slotted

::slotted 现在所有新浏览器都支持，并且可以与 ViewEncapsulation.ShadowDom

::slotted is now supported by all new browsers and can be used with ViewEncapsulation.ShadowDom

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

更新 1 ::ng-deep

/deep/ 已弃用并由 ::ng-deep 取代.

/deep/ was deprecated and replaced by ::ng-deep.

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

::ng-deep is also already marked deprecated, but there is no replacement available yet.

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

When ViewEncapsulation.Native is properly supported by all browsers and supports styling accross shadow DOM boundaries, ::ng-deep will probably be discontinued.

原创

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

Angular adds all kinds of CSS classes to the HTML it adds to the DOM to emulate shadow DOM CSS encapsulation to prevent styles of bleeding in and out of components. Angular also rewrites the CSS you add to match these added classes. For HTML added using [innerHTML] these classes are not added and the rewritten CSS doesn't match.

作为解决方法尝试

• 用于添加到组件的 CSS

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

• 用于添加到 index.html
的 CSS
• for CSS added to 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 一起使用，但随后只会被忽略，因为它们不是必需的.在支持跨组件样式的更高级功能之前，这些组合器只是一个中间解决方案.

>>> (and the equivalent/deep/ but /deep/ works better with SASS) and ::shadow were added in 2.0.0-beta.10. They are similar to the shadow DOM CSS combinators (which are deprecated) and only work with encapsulation: ViewEncapsulation.Emulated which is the default in Angular2. They probably also work with ViewEncapsulation.None but are then only ignored because they are not necessary. These combinators are only an intermediate solution until more advanced features for cross-component styling is supported.

另一种方法是使用

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

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

for all components that block your CSS (depends on where you add the CSS and where the HTML is that you want to style - might be all components in your application)

更新

Plunker 示例

这篇关于Angular 2 - innerHTML 样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！