如何仅对组件中的特定ViewEncapsulation元素(角)关闭

Question

我知道我可以禁用整个组件的ViewEncapsulation：

import { ViewEncapsulation } from '@angular/core';
...
encapsulation: ViewEncapsulation.None

但是，我希望将ViewEncapsulation保留在组件上，但只对组件中的某些HTML元素禁用它。

例如：

<div>
...
  <p id="disable_view_encapsulation">...</p>
</div>

如何仅对带有ViewEncapsulation的<p>标记禁用id="disable_view_encapsulation"

Answer 1

这是一个相当棘手的问题，因为您正在添加样式，以便它们可供所有元素使用。

最简单的方法是改变你的风格，以符合你的需要。

另一种方法是创建某种自定义指令，为所选的元素重置样式，但是哦，好吧，您将保留默认样式。我看不出你需要多少修改，也不知道它会有多复杂，所以很难说我们是否可以在指令中概括它。

嗯，您可以尝试使用自定义组件包装器，它将HTML作为输入并显示它。如果我们有一个新组件，我们可以将它的ViewEncapsulation设置为不同的值。但是，在这种情况下，您可能会得到一个奇怪的样式文件。

老实说，如果有可能保持代码简单而不增加更多的复杂性，我宁愿对样式进行更改。

Answer 2

您可以在关闭视图封装后，将元素包装在要重用的组件中。不能对单数元素禁用它，只能禁用整个组件。在你的情况下，没有别的办法能真正解决这个问题了。奇怪的是，您的本地化受到了应用于元素的属性的影响，我建议研究一下为什么会这样，看看是否还有其他人在使用它，以及他们是如何绕过它的。