如何从组件访问主体

时间:2019-08-28 12:03:37

标签: angular

我有一个有角度的应用程序,其中的属性来自“ 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

3 个答案:

答案 0 :(得分:0)

  

引用angular component styles

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

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

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

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

编辑(根据您的要求,请尝试以下方法):

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

答案 1 :(得分:0)

封装组件系统的目的是防止您将与组件无关的代码放置在组件外部。正确的处理方式是在顶级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;
  }
}

答案 2 :(得分:-1)

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