内置指令不适用于根组件答案

【问题标题】：Built in directives not working on root component内置指令不适用于根组件
【发布时间】：2021-08-02 04:54:50
【问题描述】：

在我的应用程序中，根组件是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>

但不是我的根组件。

我尝试过多次重启服务器并刷新页面，但问题仍然存在。

【问题讨论】：

【解决方案1】：

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

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

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

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

:host 用于寻址宿主元素（例如）。

【讨论】：

【解决方案2】：

你可以这样实现：

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

:host.hide {
  display: none;
}

【讨论】：