从父应用样式

Question

假设我有一个带有此模板的组件：

 <div class="frame">
  <span class="user-defined-text">{{text}}</span>
</div>
<style>
  span { font-size: 3em; }
  .frame { ... }
</style>

如何合并应用于组件的样式，例如

<custom-component [text]="'Some text'">
<style>custom-component { font-weight: bold; }</style>

以便最终输出“某些文本”既粗体 又 是 3em 大小？

更好的是有一种方法可以获取宿主元素的计算样式，例如，我可以将宿主的 border-color background-color 到我的某些元素的 —模板？

原文由 Soumya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

• 设置 encapsulation: ViewEncapsulation.None 以允许应用来自外部的样式。

 import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'custom-component',
  encapsulation: ViewEncapsulation.None
})
export class Custom {

• 使用 styleUrl 结合主机选择器添加 CSS 文件

:host(.someClass) {
      background-color: blue;
}

<custom-component class="someClass"></custom-component>

根据添加到元素的类来应用样式。

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

关于 CSS，组件支持 shadow DOM。这意味着他们的风格是孤立的。默认模式是隔离的。所以你需要在组件中定义 CSS 样式（styles 属性）。

您还可以将封装模式更改为 ViewEncapsulation.None 。这样你的组件就可以看到父组件的样式：

 @Component({
  selector: 'child',
  encapsulation: ViewEncapsulation.None,
  (...)
})
export class MyComponent {
  (...)
}

希望它可以帮助你，蒂埃里

原文由 Thierry Templier 发布，翻译遵循 CC BY-SA 3.0 许可协议