Question

如何防止添加到具有innerHtml的子项的子组件样式应用于父项？巧合的是，父母可能已经拥有一个同名的css类。如果将ViewEncapsulation设置为Native，则这似乎正常工作（子项具有红色背景，父项具有绿色），但使用“模拟”则不然。我不能使用Native，因为据说，所有浏览器都不支持。

＆＃xA;＆＃xA;

app.ts

＆＃xA;＆＃xA; < pre>

 import {Component，NgModule，VERSION}来自'@ angular / core'＆＃xA; import {BrowserModule，DomSanitizer}来自'@ angular / platform-browser'＆＃xA; import {Component，Input，ViewEncapsulation来自'@ angular / core'＆＃xA;＆＃xA; @Component（{＆＃xA; selector：'my-app'，＆＃xA; template：`＆lt; div class =“header”＆gt;＆ #xA;＆lt; h2＆gt;您好{{name}}＆lt; / h2＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;＆lt; hr＆gt;＆＃xA;＆lt; child [content] =“content”＆gt ;＆lt; / child＆gt;＆＃xA;`，＆＃xA;＆＃xA;}）＆＃xA;＆＃xA;导出类App {＆＃xA;名称：字符串;＆＃XA; content：string ='＆lt; style＆gt; .header {background-color：red; color：white;}＆lt; / style＆gt;＆lt; div class =“header”＆gt;这是子内容＆lt; / div＆gt;'＆＃xA ;构造函数（public ds：DomSanitizer）{＆＃xA; this.content = this.ds.bypassSecurityTrustHtml（this.content）;＆＃xA; this.name =`Angular！ V $ {VERSION.full}`＆＃XA; }＆＃xA;}＆＃xA;＆＃xA; @Component（{＆＃xA; selector：'child'，＆＃xA; template：`＆lt; div [innerHtml] =“content”＆gt;＆lt; / div＆gt;`，＆＃xA;封装：ViewEncapsulation.Emulated＆＃xA; //封装：ViewEncapsulation.Native＆＃xA;}）＆＃xA; export class child {＆＃xA; @Input（'content'）内容;＆＃xA;＆＃xA;}＆＃xA;＆＃xA; @NgModule（{＆＃xA; imports：[BrowserModule]，＆＃xA;声明：[App，child ]，＆＃xA; bootstrap：[App]＆＃xA;}）＆＃xA;导出类AppModule {}＆＃xA;

＆＃xA;＆＃xA;

样式.css

＆＃xA;＆＃xA;

  .header {＆＃xA;背景色：绿色;＆＃XA;颜色：白色;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

Plunker示例

＆＃xA;

Answer 1

我的发现:( Angular 5）模拟封装不起作用，因为它仅在编译时应用，Native在运行时应用，但不能使用，因为它不支持跨浏览器。由于angular不会在运行时控制innerHtml，因此html会直接插入到dom中，这会导致具有现有名称的类被插入的html / css无意中覆盖。因此，目前，避免此问题的唯一解决方案是在将其插入dom之前手动重命名hss中的css类及其引用。这就是用于隔离css的角度，当：在样式装饰器中指定host时。目前还没有办法在运行时触发angular的自定义css / html字符串的编译，这会为我们重命名，虽然功能明显存在。

Answer 2

任何组件都应该拥有它自己的样式表。在那里你可以添加这样的东西：

:host {
  //styling
}
:host > div { //etc }

使用：host的任何内容都适用于该组件。这不会解决您的问题吗？

例如，如果您知道要添加的结构，可以将其写入组件装饰器：

@Component({
  selector: 'child',
  template: `<div [innerHtml]="content"></div>`,
  encapsulation: ViewEncapsulation.Emulated,
  styles: [ ':host { position: absolute; top: 10%; }' ]
})

然后你仍然可以添加你的innerHtml，并且样式将适用于它。因此，在上述情况下，：host {}样式应该在组件部署到DOM时应用于组件。从那时起，如果你知道你的innerHtml将包含哪些结构/标签/类，那只是为它们设计造型的问题。

或者。而不是像上面那样的样式，将其更改为自己的样式表：

  styleUrls: ['/some/path/to/stylesheet.css']

防止使用innerHtml添加的子组件<style>应用于父级

2 个答案: