gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 06:51:39 25 4
gpt4 key购买 nike

虽然 Angular 原生支持 Web components ,我不清楚如何使用 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>标签为黑色背景的红色。

但是,由于 Angular 封装的性质,我无法将此样式规则放在 Angular 中以使其从应用程序 Bootstrap 到其下的每个组件都有效。或者有吗?

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

我找到了 this article谈论在 js 导入中转换 SCSS 文件,这似乎是一个合适的解决方案,但是,我无法轻松地将它移植到一个 Angular 项目中,但会再试一次。

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

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

最佳答案

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

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

关于javascript - 在 Angular 中设置 Angular Web 组件的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66132934/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com