来自具有css的组件的angular2样式正文

Question

如何仅使用css (无主机绑定解决方案、无视图封装解决方案、无...)从组件的样式表中设置body标记的样式

我试过了，但不起作用(sass)

* >>> body
  overflow: hidden

我也试过了

body /deep/
  overflow: hidden

这是我的index.html

<body>

<app-root></app-root>

</body>

Answer 1

由于封装的原因，您不能引用parent。您可以做的是注入元素ref，然后使用js设置它：

constructor(private elRef: ElementRef) {
   elRef.nativeElement.ownerDocument.body.style.overflow = 'hidden';
}

然后在你的销毁钩子里：

this.elRef.nativeElement.ownerDocument.body.style.overflow = null

Answer 2

我已经用以下方法解决了这个问题：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'realtime-tooltip',
    template: '',
    styles: [`
        .nvtooltip.xy-tooltip tr:nth-child(2),
        .nvtooltip.xy-tooltip tr:nth-child(4) {
            display: none;
    }
    `],
    encapsulation: ViewEncapsulation.None
})
export class RealtimeTooltip {}

@Component({
    selector: 'realtime-audience-graph',
    template: require('./realtime-audience-graph.component.html'),
    styles: [require('./realtime-audience-graph.component.scss')]
})

export class RealtimeAudienceGraph {}

样式在组件之外，我已经在组件html中包含了这个组件。

<realtime-tooltip></realtime-tooltip>

将ViewEncapsulation设置为none将允许对组件外部的任何元素设置样式。主组件仍将使用默认封装。

Answer 3

您只需通过index.html即可完成此操作

<body style="overflow: hidden;">

<app-root></app-root>

</body>