在angular中设置Angular web组件的样式

文章/答案/技术大牛

发布

1回答

Angular2使用网络组件吗？

angular、web-component

我听过很多关于角的第二次出现的讨论，其中似乎有很多奇妙的东西，但我知道，角1.0并没有现成的Web组件集成。我读过一些关于Angular2的文章，它不再使用指令。所以，我想知道这是否意味着Angular2将在没有任何额外集成的情况下使用聚合物/HTML模板和其他Web组件？

浏览 2提问于2016-10-24得票数 7

1回答

包含我的Angular Web组件的样式，这样它就不会渗入使用它的组件

angular、web-component、angular-elements

我们已经使用Angular v6构建了一个新的We组件。现在的问题是，当我在一个空白的应用程序中使用该组件时，它可以完美地工作，但当我在一个现有的应用程序中使用它时，它完全扰乱了css。我能找到的原因是，当我使用bootstrap来构建我现有的应用程序，并使用bootstrap来构建then组件时，它会导致_ngcontent-*与这两个组件匹配，然后相互渗透。就像row.[_ngcontent-c

浏览 12提问于2018-09-09得票数 3

1回答

javascript、angular、sass、web-component

虽然Angular对Web components有本机支持，但我不清楚如何在不泄露托管页面样式的情况下使用SCSS设置web组件的样式。通常，在Angular应用程序中，我会在/src/styles.scss中定义我的样式，在其中我会导入所有与外部框架相关的样式和其他全局定

浏览 9提问于2021-02-10得票数 2

2回答

如何防止Angular元素(web组件)重写其父元素的样式

css、angular、web-component

我的Angular web组件有一些问题。我的angular应用程序包含web组件作为子组件，但问题是子组件的css也应用于其父组件。例如，在web组件中，它的body标签上有一些样式。但是，它也覆盖了其父对象的样式。有什么方法可以避免这

浏览 12提问于2021-06-10得票数 0

1回答

防止从父页面中的web组件覆盖CSS

css、angular、web-component、angular-elements

我使用Angular Elements (6.0.3)创建了一个web组件。当我在另一个网站中使用web组件时，该web组件会覆盖父页面的样式，因为它也使用Bootstrap。所以现在我使用的是默认的“已仿真”。我发现如果我在我的样式前面添加:host ::ng-deep，它们只应用于web组件本身，这很棒。

浏览 0提问于2018-06-29得票数 2

2回答

mdToolTip的自定义样式

css、angular

我在一个Angular项目中有以下代码 mdTooltipPosition="right"在我的

浏览 0提问于2018-01-30得票数 2

3回答

Angular 6不应用scss样式

css、angular、sass

我有一个组件页面和相应的样式表，但是component.scss中的类并不适用于该页面。没有错误，我仍然想知道为什么？这是我的产品-detailpage.Component.html <h1>Product Detail Page</h1>这是.ts文件 import { Component, OnInit } from '@angular/core&

浏览 0提问于2018-06-26得票数 13

1回答

卷影dom内的材料ui缺少用于后续webcomponent调用的样式。

reactjs、material-ui、shadow-dom

我们有一个使用Material-ui的React编写的web组件。此used组件将在angular应用程序中使用。最初，我们有一个问题，即材质样式不能应用于卷影dom中的元素。因此，我们遵循这里给出的解决方案:使用How to mount styles inside shadow root using cssinjs/jss使用StylesProvider，并将jss的insertion

浏览 15提问于2020-07-14得票数 1

回答已采纳

1回答

有没有一种方法可以在不使用阴影DOM的情况下在angular* 8(或9)中创建自定义元素？*

angular、web-component、angular-elements、htmlelements

查看Angular Elements文档，它展示了如何使用阴影DOM创建封装的可共享组件(即web组件)，但我的公司有一个全局样式指南，所以我们需要所有组件都具有相同的样式。我们如何在没有封装(即HTMLElement)的情况下在Angular中创建自定义元素，并能够在整个组织中共享它们？

浏览 5提问于2020-06-27得票数 0

2回答

如何将样式添加到父组件？

angular

既然在angular.json的styles[]中引用的样式表不能在组件的styleUrls[]装饰器中引用，那么从父组件的主CSS文件中设置父组件中的子元素样式的准确方法是什么？例如。app-component > parent-component > chi

浏览 0提问于2019-11-06得票数 0

1回答

如何在全局css和angular中应用不同效果的同一类和特定组件

angular、angular6

我已经在我的angular项目中使用了引线js，当这个js在我的组件上运行时，它在这个组件视图上生成SVG线，这是可以的，但问题是当我移动到另一个组件时，它总是显示SVG。我在全局css上设置了引导者-line{display:none；}，这样它就可以从全局视图中成功隐藏，但不会显示在组件视图上。这就是为什么我要在组件样式<e

浏览 1提问于2019-08-26得票数 0

1回答

如何在Angular2中为WebComponents添加样式

css、angular、web-component

我有一个名为my-element的简单元素，并且希望在相邻的my-elements之间有2em垂直空间。my-element + my-element { margin-top: 2em; } my-element是一个WebComponent，我已经在我的Angular2组件中将其声明为ViewEncapsulation.Native，这意味着样式被隔离在阴影DOM中并且不能更改，或者至少在不应用

浏览 0提问于2016-10-10得票数 0

1回答

使用Angular* Flex-Layout的原因是什么？*

html、css、angular、flex3、angular-flex-layout

在我正在做的一个项目中，团队决定使用angular/flex-layout。我想知道，使用它的原因到底是什么？我只能找到反对的理由。例如下面的代码：<div fxLayout="row" fxLayoutAlign="space-between"> 关于我们都熟悉的html和CSS，第一个“最佳实践”/“关注点分离”是内容和样式的分离；

浏览 28提问于2021-06-15得票数 0

2回答

Angular 2组件本身可以设置样式吗？

angular

在Angular 2中，您可以在组件的模板中包含样式表。由于Angular 2的视图封装，样式仅适用于包含的元素。有没有一种方法可以在不放置周围<div class="component-wrapper"></div>的情况下设置组件的主标

浏览 2提问于2016-01-12得票数 25

回答已采纳

1回答

角度元素- ViewEncapsulation

angular、web-component、angular-elements

我已经制作了一个Angular Elements web组件。先谢谢你……

浏览 2提问于2019-12-24得票数 1

1回答

阻止一个组件从另一个组件angular6获取CSS

angular、angular-material

我有一个名为profile-data.component的组件，它使用了角度材质mat-tab-group组件，我首先在tournament-list.component中使用了这个角度材质组件。现在我的mat-tab-group inside profile-data.component正在从tournament-list.component获取css，有什么方法可以阻止它吗？我的文件夹结构如下所示。profile-data.component

浏览 24提问于2019-01-22得票数 1

1回答

角2- Karma找不到外部模板或样式文件。

javascript、angular、unit-testing

文件结构(它是Range2官方网站的快速启动项目)：在一开始，当我启动Karma时，我遇到错误，不能找到/@角/.下的两个文件。我发现我必须改变systemjs.config.js中的路径，才能让它正常工作： * System configuration for Angular samples * Adjust as'npm:angular-in-memory-web-api/b

浏览 6提问于2017-07-21得票数 0

回答已采纳

1回答

Angular将样式标签添加到innerHTML

javascript、css、angular

我创建了一个Angular项目，并希望将style CSS插入到html中，但我不希望插入的CSS替换具有相同标签或类名的其他样式。200px} .another-same-class-name{color: blue;font-size: 13px}上面是我想要插入到组件模板中的样例样式我的组件 @

浏览 2提问于2018-05-05得票数 7

回答已采纳

2回答

_ngcontent-c#在Angular中是什么意思？

javascript、angular

我正在学习Angular 2/4，我看到了带有ng生成属性的html标记：_ngcontent-c0, _ngcontent-c1... 这个c值是什么意思？

浏览 0提问于2017-07-13得票数 40

回答已采纳

1回答

材料设计--不使用角2的工具提示

angular、material-design

然而，许多材料设计Lite组件似乎打破当放置在一个角度2组件模板。div for="inbox1" class="mdl-tooltip">You have {{messages.length}} messages</div></main> 此代码中的工具提示将不会显示但是，如果我将代码复制到角2组件之外，工具提示就会显示。我猜是因为数据徽章不是div标签<

浏览 6提问于2016-03-08得票数 5

回答已采纳

点击加载更多

Angular2使用网络组件吗？

包含我的Angular Web组件的样式，这样它就不会渗入使用它的组件