Question

如何使用ONLY css从组件的样式表设置body标签的样式（没有主机绑定解决方案，没有视图封装解决方案，没有...）

我尝试了这个，但它不起作用（sass）

* >>> body
  overflow: hidden

我也试过这个

body /deep/
  overflow: hidden

这是我的index.html

<body>

<app-root></app-root>

</body>

Answer 1

由于封装，您无法引用父级。您可以做的是注入元素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>

带有css的组件的angular2样式体

3 个答案: