Question

我有一个有角度的应用程序，其中的属性来自“ body”标签overflow-y: auto。问题是，我只想为一页设置overflow-y: hidden。为此，我必须从组件访问body标签。那是我的问题，我就是做不到。

我尝试过

:host >>> body {
    overflow-y: hidden;
}

:host(body) {
    overflow-y: hidden;
}

这些都不起作用。

在该示例中，我无法更改hero-details-box.css

的正文背景

https://stackblitz.com/angular/kmqqeakjvya

Answer 1

引用angular component styles

Angular应用程序使用标准CSS设置样式。这意味着您可以将有关CSS样式表，选择器，规则和媒体查询的所有知识直接应用于Angular应用程序。

此外，Angular可以将组件样式与组件捆绑在一起，从而实现比常规样式表更加模块化的设计。

此页面介绍了如何加载和应用这些组件样式。

您可以在Stackblitz中运行实时example，以体验如何将样式放入组件中

编辑（根据您的要求，请尝试以下方法）：

@Component({
  selector: 'app-root',
  template: `
    <style>
      body {
        overflow-y: hidden;
      }
    </style>
  `
})

Answer 2

封装组件系统的目的是防止您将与组件无关的代码放置在组件外部。正确的处理方式是在顶级app.component上进行，对<body>进行任何其他修改。

由于<body>不是组件的一部分，因此您应该检查当前路径并相应地应用CSS类。

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;
  }
}

Answer 3

您可以为组件设置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>指令）并在其中应用样式。这将需要您对应用程序进行相当多的更改，但这是更更安全，更清洁的方法。

如何从组件访问主体

3 个答案: