时间戳

首页 > 解决方案 > 在 Angular 中设置 Angular Web 组件的样式

javascript - 在 Angular 中设置 Angular Web 组件的样式

问题描述

虽然 Angular 对Web 组件有原生支持，但我不清楚如何使用 SCSS 为 Web 组件设置样式而不泄露托管页面上的样式。

显然，如果一个组件在其 .scss 文件中定义了它的规则，那么这些规则仅适用于该组件。

  +-----------------------------------------------------------------------+
  |                                                                       |
  |                                                                       |
  |                                                                       |
  |   +----------------------------------------------------------------+  |
  |   |                                                                |  |
  |   |                                                                |  |
  |   |                        Web component                           |  |
  |   |                                                                |  |
  |   |                                                                |  |
  |   | +---------------------------+  +-----------------------------+ |  |
  |   | |                           |  |                             | |  |
  |   | |                           |  |                             | |  |
  |   | |      Sub component A      |  |       Sub component B       | |  |
  |   | |                           |  |                             | |  |
  |   | |                           |  |                             | |  |
  |   | +---------------------------+  +-----------------------------+ |  |
  |   +----------------------------------------------------------------+  |
  |                                                                       |
  |                                                                       |
  |                           Web page                                    |
  |                                                                       |
  |                                                                       |
  |                                                                       |
  +-----------------------------------------------------------------------+

在一个典型的示例中，假设我有一个网页，其中包含使用 @angular/elements 创建的自定义组件。

通常，在 Angular 应用程序中，我会在 /src/styles.scss 中定义我的样式，我将在其中导入所有与外部框架相关的样式和其他全局定义，这些定义会在构建后生成一个包含所有内容的 CSS 文件.

但是，如果我将此文件链接到托管页面，则其中包含的所有样式都对整个页面有效。所以一个

p {
  color: red;
  background-color: black;
}

将使所有<p>标签为黑色背景的红色。

但是，由于角度封装的性质，我无法将这种样式规则放在角度中，以使其从应用程序引导程序到其下的每个组件都有效。或者有吗？

如果我将我的样式放在 app.component.scss 或 MyCustomElement.component.scss 中，则规则仅在该组件中有效，这在 Angular 中是一个明显的设计机制。

我发现这篇文章谈论的是在 js 导入中转换 SCSS 文件，这似乎是一个合适的解决方案，但是，我无法轻松地将其移植到 Angular 项目中，但会再试一次。

任何答案以及关于如何实现这一点的官方文档的建议/链接将不胜感激

[编辑]为了澄清我的问题：我想在 Angular Generated Web 组件上留出一个空间，以便将一些样式全局放置到组件中，而不是放置到托管它的页面上。诸如注入转换为 javascript 的 scss 之类的创造性方法也可能很有趣。我只是没有找到一个足够实用的可以在 Angular 中使用它。

标签： javascriptangularsassweb-component

解决方案

放入的样式src/styles.scss将适用于所有组件。实际上，您放置在styles数组中的所有文件angular.json都将适用于所有组件。

但是，如果您特别想覆盖组件的样式，则可以::ng-deep在样式之前使用选择器。

推荐阅读