Bla*_*bam 2 css dart angular-dart angular2-template angular2-dart
我的 Angular 2 Dart 应用程序有许多嵌套组件。如果我的组件之一的某个属性设置为 true，则会显示一个弹出窗口。
如果显示此弹出窗口，我想向文档正文添加一个类。
伪代码示例：
<html>
<head>
</head>
<body class="">
<app-component>
<home-component> <!-- with routers -->
<inner-component>
<popup-component>
// if I am active I want to add a body class
</popup-component>
</inner-component>
</home-component>
</app-component>
</body>
</html>
原因很简单：如果显示弹出组件，我想禁用正文滚动 ( overflow-x:hidden;)。bool show_popup如果其中的属性popup_component.dart设置为 true，则会显示弹出组件。
不幸的是，在 CSS 中 - 据我所知 - 没有选择器来检查这个（是否有 CSS 父选择器？） - 否则我会说类似的话
body:has(.my_popup)
在 main.css 文件或类似的文件中。
我怎样才能达到预期的结果？
有两种方法。
您可以使用
@HostBinding('class.someclass') bool isSomeClass = true;
在根组件中，如果有
selector: 'body'
或者
document.querySelector('body').classes.add('someClass');
您可以:host-context(...)根据与父级匹配的选择器来设置组件的样式
:host-context(body.someClass) {
background-color: red;
}
body当元素设置时，背景颜色会变成红色class="someClass"。
| 归档时间： |
|
| 查看次数： |
1409 次 |
| 最近记录： |