我有一个角度应用程序，其中我的属性来自"body"标签overflow-y: auto。问题是，我只想为一个页面设置overflow-y: hidden。为此，我必须从组件访问正文标签。这是我的问题，我做不到。
我试过了
:host >>> body {
overflow-y: hidden;
}
:host(body) {
overflow-y: hidden;
}
这些都不起作用。
在那个实时示例中，我无法更改例如hero-details-box.css的身体背景
https://stackblitz.com/angular/kmqqeakjvya
引用角度组件样式
Angular 应用程序使用标准 CSS 设置样式。这意味着您可以将所知道的有关CSS样式表，选择器，规则和媒体查询的所有内容直接应用于Angular应用程序。
此外，Angular 可以将组件样式与组件捆绑在一起，从而实现比常规样式表更模块化的设计。
本页介绍如何加载和应用这些组件样式。
您可以在 Stackblitz 中运行实时示例，体验如何将样式放入组件中
编辑(根据您的要求尝试以下方法(：
@Component({
selector: 'app-root',
template: `
<style>
body {
overflow-y: hidden;
}
</style>
`
})
封装组件系统的目的是防止将与组件无关的代码放置在组件外部。处理此问题的正确方法是在顶层app.component上，其中可能会对<body>进行任何其他修改。
您应该检查当前路由并相应地应用 CSS 类，因为<body>不是组件的一部分。
import { Router } from '@angular/router';
import { Component, Inject, OnInit, Renderer2 } from '@angular/core';
@Component({})
export class AppComponent implements OnInit {
constructor (
private renderer: Renderer2,
private router: Router,
) {}
ngOnInit(): void {
if (this.router.url === '/overflow-hidden-url') {
this.renderer.addClass(this.document.body, 'hide-overflow');
}
}
}
然后，您可以在正文的全局样式表中选择此 HTML 类(同样，这不是特定于组件的，而是对正文的直接编辑(。
body {
overflow-y: auto
&.hide-overflow {
overflow-y: hidden;
}
}
您可以为组件设置encapsulation: ViewEncapsulation.None，这将允许直接设置主体样式：
@Component({
encapsulation: ViewEncapsulation.None
})
export class ExampleComponent { }
或者，您可以使用深度选择器。它们被标记为已弃用，但它们仍然可以在最新的 Angular 8.2.4 中工作：
/deep/ body {
overflow-y: hidden;
}
/* or */
>>> body {
overflow-y: hidden;
}
/* or */
::ng-deep body {
overflow-y: hidden;
}
但是要小心这两种方法，因为它们非常容易出错。组件样式设计为处理元素本身。由于样式是在没有元素选择器的情况下应用的，因此即使组件被销毁，它也可能会干扰网站。
做这样的事情的更好方法是使用服务与主要组件(或<body>指令(进行通信，并在那里应用您的样式。这将需要您更改相当多的应用程序，但它是更安全，更清洁的方法。