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

update 2 ::slotted

::slotted，并且可以与ViewEncapsulation.ShadowDom

https://developer.mozilla.org/zh-美国/docs/Web/CSS/::开槽

更新1 :: ng-deep

/deep/，并替换为::ng-deep.

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

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

当所有浏览器正确支持ViewEncapsulation.Native并支持跨阴影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类添加到HTML中，并将其添加到DOM中以模拟影子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;
}

在2.0.0-beta.10中添加了

>>>(和等效的/deep/，但/deep/在SASS上效果更好)和::shadow.它们类似于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)

更新

示例柱塞

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