来自CSS组件的Angular2风格的body

我如何仅使用CSS从组件的样式样式(没有主机结合解决方案，没有视图封装解决方案，否...(

我尝试过，但它不起作用(sass(

* >>> body
  overflow: hidden

我也尝试了

body /deep/
  overflow: hidden

这是我的index.html

<body>
<app-root></app-root>
</body>

由于封装，您无法参考父母。您能做的就是注入元素参考，然后使用JS设置它：

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

然后在您的销毁钩子中：

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

我已经用：

解决了这个问题

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>

ViewSapsulation设置为None，将允许在组件之外的任何元素进行样式。主组件仍将具有默认封装。

您只需从index.html

做到这一点

<body style="overflow: hidden;">
<app-root></app-root>
</body>

相关内容

最新更新

热门标签：