标签: angular2viewencapsulation

我试图通过添加实例 id 来封装我的元素 id，如下所示：

<label for="id-{{ unique }}-name"></label>
<input id="id-{{ unique }}-name" type="text" formControlName="name">

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

像这样的东西：

@Injectable()
export class UniqueIdService {
  private counter = 0

  constructor() {}

  public getUniqueId (prefix: string) {
    const id = ++this.counter
    return prefix + id
  }
}

灵感来自 lodash uniqueid

但我宁愿使用 ids 中构建的角度。所以我目前的解决方案是从组件属性中提取 id _nghost。

constructor ( private element: ElementRef, ) {
   const ngHost = 
     Object.values(this.element.nativeElement.attributes as NamedNodeMap)
     .find(attr => attr.name.startsWith('_nghost'))
     .name
   this.unique = …

我想覆盖我正在使用的开源组件的样式,但我能找到禁用视图封装的唯一方法是在组件的装饰器上.当然使用第三方模块意味着我无法编辑它的来源.怎么可能呢？

编辑

我知道/ deep/styles的建议.我想要做的是使用bootstrap 4中的样式覆盖第三方组件中的表样式.自定义组件应用了一个.table类,但是通过视图封装,boostrap 4类无法访问它.

我只是想知道是否有一种方法来完全禁用视图封装,而不必分叉代码并添加组件装饰器属性值"encapsulation:ViewEncapsulation.None"供我自己使用.

查看有关ShadowDOM的文章,似乎是对DocumentFragments的增强.ShadowDOM的真正好处是什么？CSS特异性？我不能用Fragments做大致相同的事情吗？

我正在寻找各自的功能列表.例如,两者似乎都允许您在内存中组装d​​om树并离开主渲染路径.但是,ShadowDOM似乎具有作用域CSS的额外好处.

在什么情况下你会使用ShadowDOM vs你想要使用DocumentFragments的地方？

UPDATE

在仔细研究了这个之后,我看到这两种技术是完全正交的.

注意:由于问题已经结束,我自己无法回答.我最初把我的发现的细节放在下面的评论中,但想到更多的人会在这里查看文本.

Document Fragments是一个Javascript/DOM构造工具,用于创建DOM之外的非heirrchical节点集合(每个节点可以是其他节点的父节点).它们本质上是节点集合的包装器,一旦片段附加到DOM就会被放弃.DocumentFragments允许您在同一级别收集多个节点,并将它们作为兄弟节点附加到另一个DOM节点.

Shadow Dom就是在更大的渲染DOM中隔离副作用.ShadowDom允许您使用封装样式创建沙盒可重用组件.当基于ShadowDom的组件添加到更大的Web应用程序时,其CSS样式不会泄漏到应用程序的其余部分,应用程序自己的样式也不会影响组件的呈现.

请注意CSS组合器,例如/deep/,::shadow存在用于从父dom样式化(和选择)shadowDom组件,但这些组件在不久的将来被弃用.因此,建议使用ShadowDOM的可重用组件依赖CSS变量进行样式设置,如果它们打算由使用它们的应用程序进行自定义.

我有一个 Angular 6 自定义表单控件，我将其创建为另一个控件的包装器，以便我们可以应用自己的 CSS 规则。

我已经删除了ViewEncapsulation这个包装器组件上的 ，以便我们可以挂接到现有表单控件生成的 css 类并覆盖规则。

encapsulation: ViewEncapsulation.None

:host一位审稿人建议我使用和的组合，:host::ng-deep而不是使用ViewEncapsulation.None.

我不知道为什么这样会更好。有人可以解释一下吗？

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

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

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

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

如何将 CSS 范围限定为 Angular 中的一个模块？当我懒惰地加载一个模块，并且在该模块中有 ViewEncapsulation.None 时，CSS 会渗入我应用程序的其他部分。知道如何防止这种情况发生，或者仅在 Angular 5 中为该模块保留该 CSS？