css - 如何将 css 属性传播到内部 Angular 组件和子组件？

Question

我有一个带有自定义 HTML 元素的 Angular 2 应用程序，如下所示:

<custom1>
 <div id="div1">
  <div id="div2"></div>
  <custom2>
   <div id="div3"></div>
  </custom2>
 </div>
</custom1>

在组件 custom1 中我有这个 css:

div {
 border-style: solid;
}

此样式适用于元素 div1 和 div2，但不会传播到元素 div3。

如何在不为 custom2 编写特定 CSS 的情况下将 custom1 的 CSS 属性传播到 custom2 中？

如果相关:custom1 包含在 Bootstrap 网格容器中。

Answer 1

您可以设置 View Encapsulation在您的 custom1 组件上设置为 None:

@Component({
    templateUrl: './custom1.component.html' ,
    styleUrls: ['./custom1.component.css'],
    encapsulation: ViewEncapsulation.None,
})

我提供的链接中的片段:

Component CSS styles are encapsulated into the component's view and don't affect the rest of the application.

To control how this encapsulation happens on a per component basis, you can set the view encapsulation mode in the component metadata. Choose from the following modes:

Native view encapsulation uses the browser's native shadow DOM implementation (see Shadow DOM on the MDN site) to attach a shadow DOM to the component's host element, and then puts the component view inside that shadow DOM. The component's styles are included within the shadow DOM.

Emulated view encapsulation (the default) emulates the behavior of shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view. For details, see Appendix 1.

None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.