内置指令不适用于根组件

Question

在我的应用中，根组件是 app-root。当我设置属性绑定时

<body>
    <app-root [style.display]="'none'"></app-root>
</body>

绑定被忽略。我的终端或控制台都没有错误。同样的情况发生在

<body>
    <app-root [ngClass]="'someClass'"></app-root>
</body>

这些可以与其他嵌套组件一起正常工作，例如

<head-comp [ngClass]="'someClass'"></head-comp>

但不是我的根组件。

我试过多次重启服务器和刷新页面，问题依旧。

Answer 1

首先，这不是在标签中写一个单词的正确方法，因为它的行为类似于模板指令，或者您可以说空框由 app.component.html 内容填充，

问题可能是主要元素不是您应用样式的组件的一部分

您可以添加它，它应该正确定位该组件。

:host {
    width: 100%;
    height: 100%;
}

:host 用于寻址托管元素（例如）。

Answer 2

你可以这样实现：

export class AppComponent {
  @HostBinding('class') get class() {
    if (false) {
      return 'do not hide';
    }
    return 'hide';
  }

:host.hide {
  display: none;
}

Built in directives not working on root component