Angular 2 Dart：如何从组件内部添加主体 class？

Question

我的 Angular 2 Dart 应用程序有很多嵌套组件。如果我的组件之一的某个属性设置为 true，则会显示一个弹出窗口。

如果显示此弹出窗口，我想在文档正文中添加一个 class。

伪代码示例：

<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;)。如果 popup_component.dart 中的属性 bool show_popup 设置为 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：如何从组件内部添加主体 class？

Angular 2 Dart: How to add body class from inside component?

css

dart

angular-dart

angular2-template

angular2-dart