logo标签列表

主机 + ng-deep + body css未应用

htmlcssangularsass
3

我正在尝试为整个组件页面中显示的特定组件制作背景颜色。 使用以下代码可以成功实现：

\ ::ng-deep body
 background-color: red

但问题是，当我这样做时，body的CSS会渗透到其他组件页面上，这些页面也变成了红色。 所以我真正想做的是，让它与主机本地化。 我尝试使用了。
\:host ::ng-deep body

但是它也没有起作用，直到我在HTML文件组件中添加了一个特定的body标签，页面背景才改变颜色。但我不想添加body标签，因为这样做会限制页面元素的大小。
我还尝试使用ViewEncapsulation，但它破坏了我的所有CSS。
非常感谢您的帮助。
1个回答
4
你的第一个问题（正如你发现的那样）是ng-deep会渗透到其他页面。由于CSS在Angular中是惰性加载的，一切都会很好，直到你进入那个页面，然后前往另一个页面，突然一切都变成了红色。
你的第二个问题是:host伪选择器并没有表示“仅适用于此页面”，而是表示“对于此组件内的所有内容”。
因此，以一个示例为例：
如果我有一个名为MyComponent的组件，并且我有以下css：
:host ng-deep div {
    background-color :red;
}

我有一个这样的模板：

<body>
   <app-mycomponent>
       <div></div>
   </app-mycomponent>
   <app-secondcomponent>
       <div></div>
   </app-secondcomponent>
</body>

只有在 app-mycomponent 内部的 div 才会变为红色。app-secondcomponent 内部的 div 不会变为红色。再次说明，:host 允许您仅在该组件内部使用 ng-deep。那么为什么需要这样做呢？通常是因为您可能使用了一个要进行样式设置的库，所以您可以将其放在包装组件中，并自由使用带有 :host 前缀的 ng-deep 命令，以便仅对该包装器内部的库组件进行样式设置，而不影响应用程序的其余部分。那么解决方案是什么呢？另一个问题是 <body> 标签实际上位于 Angular 应用程序的范围之外。通常情况下，当我需要编辑整个 body/html 标签时，我只使用普通的 JavaScript。例如：
export class AppComponent implements OnInit, OnDestroy {
  ngOnDestroy(): void {
    document.body.style.backgroundColor = 'transparent';
  }

  ngOnInit(): void {
    document.body.style.backgroundColor = 'red';
  }
}

这并不是世界上最好的事情，但也不是可怕的。我大多数时候需要这样做是为了创建模态组件，并希望停止body滚动等。
更多关于NG-Deep bleeding 的阅读：https://tutorialsforangular.com/2020/04/13/the-dangers-of-ng-deep-bleeding/ 以及如何使用:host：https://tutorialsforangular.com/2019/12/24/using-the-css-pseudo-element-host-in-angular/
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接