当子元素未隐藏时，如何设置组件主机的样式？

Question

我有一个图像预览组件，我想在预览未隐藏时停止应用程序组件滚动。有没有一种仅限 scss/css 的方法可以做到这一点？

我已经发现，如果我将app-component的 overflow 属性设置为与:host伪类hidden，我可以阻止页面滚动。我尝试了以下代码：

.preview[hidden=false] {
    & {
        :host {
            overflow: hidden;
        }
    }
}

但什么也没发生。我用另一&尝试了一下，没有任何改变。

预览组件在其父级中如下所示。

仅当页面

处于隐藏状态时，该页面才应滚动到预览后面。无论如何，它都在滚动。SCSS可以做到这一点吗？

Answer 1

您可以使用属性和类属性对其进行管理。

app.component.html

<div [class.opened]="open"> //wrapper for app component
...
</div>

.CSS

.opened{
   height: 500px; // set it again 
   overflow: hidden;
}

演示