Question

我的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 - 据我所知 - 没有选择器来检查这个（Is there a CSS parent selector?） - 否则我会说像

body:has(.my_popup)

在main.css文件中或类似的东西。

如何达到预期效果？

Answer 1

有两种方法。

您可以使用

@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"时，

会使背景颜色变为红色。

Angular 2 Dart：如何从组件内部添加body类？

1 个答案: