使 Angular 组件样式表与子组件一起工作

Question

我对 Angular 比较陌生，我对组件样式表有疑问。

我有一个 Angular 12 应用程序并创建了一个名为 my-component 的组件。相关组件的模板是这样的：

我的-component.html

<div>
  ...some html...
  <some-other-angular-component></some-other-angular-component>
  ...some other html...
</div>

some-other-angular-component 是另一个组件，来自应用程序本身或第三方库。

现在，我想在 my-component 中做的是对 some-other-angular-component 的内容应用一些 CSS 规则。我知道它生成的 HTML 包含我可以定位的类，所以我尝试将它添加到我的组件 CSS:

我的-component.scss

.some-other-angular-component-inner-class {
  background-color: red;
}

但是，这不起作用，组件的 CSS 文件似乎只将规则应用到组件模板中直接定义的 HTML，而不是生成的 HTML子组件。

有没有办法让它工作？我发现自己必须将我的 CSS 添加到 Web 应用程序的主 style.scss 文件，即使我只想将规则应用于 my-component 内的特定 some-other-angular-component 实例。它使样式变得混乱和不必要的碎片化。这是故意的，还是我错过了什么？

Answer 1

我想你可能想研究一下 View Encapsulation。

@Component({
  selector: 'app-no-encapsulation',
  template: `
    <h2>None</h2>
    <div class="none-message">No encapsulation</div>
  `,
  styles: ['h2, .none-message { color: red; }'],
  encapsulation: ViewEncapsulation.None,
})
export class NoEncapsulationComponent { }

这些样式将添加到头部，如果样式规则匹配，也将适用于其他组件。

请注意，您仅仅对此组件启用此行为。重叠 CSS 规则的机会仍然存在，但与直接将样式放入 style.css 相比要少得多。

我还建议您在标记中添加 .class 或 #id 属性，以确保默认情况下您的规则不会重叠。

例如：

.my-component .rule-one {
}

这将确保我的规则仅应用于应用了此 class 的组件。

使 Angular 组件样式表与子组件一起工作

Make Angular component stylesheet work with sub-components

css

sass

angular

angular12