首页 文章

带有css的组件的angular2样式体

提问于
浏览 次
1

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

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

* >>> body
  overflow: hidden

我也尝试过这个

body /deep/
  overflow: hidden

这是我的index.html

<body>

<app-root></app-root>

</body>
angular

3 回答

  • 0

    由于封装，您无法引用父级 . 你可以做的是注入元素ref，然后使用js来设置它：

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

    然后在你的破坏钩子里：

    this.elRef.nativeElement.ownerDocument.body.style.overflow = null
    回复于
  • -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将允许样式化组件外部的任何元素 . 主要组件仍将具有默认封装 .

    回复于
  • 4

    你可以简单地从index.html那里做到这一点

    <body style="overflow: hidden;">

<app-root></app-root>

</body>
    回复于

相关问题