问题标签 [angular2viewencapsulation]

我的应用程序中有两个菜单。

他们都使用primeng面板菜单

我已经改变了他们的CSS。

现在的问题是，在second-menu我的应用程序中添加了 后，它left-menu的样式发生了变化。

我尝试View encapsulation在他们两个上使用，left-menu样式仍然没有封装

这是第一个菜单标题

第二个菜单

在我的 CSS 中，我使用ng-deep和:host

这是一个例子

这是一个stackblitz示例

我不会添加所有的 CSS，因为这两种样式都是一样的

如何禁用 ViewEncapsulation.None 的效果？例如，我的一个组件 (firstComponent) 定义了一个带有一些属性的 css 类。有 secondComponent 使用相同的 css 类。我希望我的“secondComponent”对第一个组件样式表定义的属性使用不同的特定值。我怎样才能做到这一点？

注意：我用不同的值在“secondComponent”中重新定义了同一个类，保持 secondComponent 默认的 viewEncapsulation。它对我不起作用。

我在内部使用 .ui-tree-container 的两个组件中都创建了 p-tree。我希望我的 secondComponent 的树的背景应该是白色的，而对于所有其他地方的树的背景应该保持黑色。

I have an Angular 6 custom form control which I have created as a wrapper around another control so that we can apply our own css rules.

I have removed the ViewEncapsulation on this wrapper component so that we can hook on to the css classes generated by the existing form control and overwrite the rules.

A reviewer suggested me to use the combination of :host and :host::ng-deep rather than using ViewEncapsulation.None.

I don't know why that could be better. Can someone explain?

我是角度组件中 ViewEncapsulation 的忠实粉丝。但是我看看我们是否将其设置为 ViewEncapsulation.None - 我们也可以仅通过 SCSS 中的组件选择器来封装样式。例如：

另外，如果我想使用一些 material.angular 组件并在 my-component 内部对其进行自定义，则无需封装就更容易和清洁：

当封装打开时：

当封装关闭时：

你怎么看？是否有一些参数可以使用封装而不是选择器封装模式？

我目前正在做一些将 Angular 应用程序共享为 Web 组件的实验，并且我遇到了一个应用程序的样式影响另一个应用程序的问题。

鉴于我使用模拟视图封装这一事实，Angular 将为我的元素添加特殊_nghost-c#和_ngcontent-c#道具，并更新样式以使用它们。现在，由于我可能在一个页面中有多个 Angular 应用程序，这些选择器可能会影响其他应用程序。

我在网上看到了一些例子，其中这些道具中有一个命名空间，例如_nghost-XXX-#，但我找不到自定义它的方法。

从主机组件覆盖子组件样式的正确方法是什么。我尝试使用 encapsulation: ViewEncapsulation.None，但我需要在 style.sass 文件而不是主机组件中编写覆盖内容。堆栈闪电战应该是什么

我正在使用带有原生封装的 AngularElements，因此 bs4 组件可以在 bs3 项目中使用。例子：

问题是如何更改 3rd 方组件的封装，以便全局 css 不会影响它？给定NgbModalWindow组件。如何将其封装更改为 ViewEncapsulation.Native 并应用特定样式？

这是相关问题

所以，我想将一个模板传递给组件，并在内部使用从该组件应用的样式呈现该模板，而不是从调用组件。有什么方法可以在不设置的情况下做到这一点ViewEncapsulation.None？

为此，我做了一个小的 stackblitz。我param button也想要呈现绿色。

https://stackblitz.com/edit/angular-zrpufe?file=src%2Fapp%2Fhello.component.ts

在我的应用程序中，我使用的组件来自ngx-bootstrap.

我想通过使选项卡本身显示为绿色来自定义组件的外观（在本例中为选项卡）。以前我可以/deep/在我的 SCSS 中使用，以针对我的组件中使用的所有选择器。但我不想使用已弃用的东西。那么如何在下面获取我的代码，以将选项卡a中的标签变为ngx-bootstrap黄色？

我试图通过添加这样的实例 id 来封装我的元素 id：

我以前使用过这个：https ://stackoverflow.com/a/40140762/12858538 。但是在将 Angular 从 7 升级到 9 之后，这似乎已被弃用。我正在考虑一个简单的帮助服务，它会为我的应用程序生成唯一的 id。

像这样的东西：

灵感来自 lodash uniqueid

但我宁愿在 ids 中使用 angulars 构建。所以我目前的解决方案是从 components_nghost属性中提取 id 。

但我对这个解决方案并不完全满意，我正在寻找对 id 的直接访问。

有谁知道如何访问这个？