通过未创建的组件设置样式

Question

新问题：

所以，我正在寻找一种方法来切换两个名为 hotel-in 和 hotel-out 的 css 类的显示。

这两个类将包含在我的所有 22 个组件中。 要切换显示，我使用了一个名为 inHotel 的变量，其中包含用户是否在酒店。

当变量为真时，hotel-in 将可见，hotel-out 将隐藏。

当变量为 false 时，hotel-out 将是 visible，并且hotel-in 被隐藏。

我怎样才能以最好的方式实现这一目标？ 这是我可以在我的主控制器中执行的一般操作吗，它会加载所有组件？

或者我必须在 22+ 个控制器中的每一个中做一些特别的事情吗？

---

老问题：

在我的主要应用程序组件中，我有路由器插座，我有以下内容：

<style *ngIf="inHotel">

  .hotel-in {
    display:block;
  }

  .hotel-out {
    display:none;
  }
</style>

   <style *ngIf="inHotel == false">

  .hotel-in {
    display:none;
  }

  .hotel-out {
    display:block;
  }
</style>

但是在检查时，即使 inhotel 是假的，它也不会创建那种风格。

这个想法是一个函数将切换这个酒店。

其他组件中的所有内容都将有一个 div 类 hotel-out 和 hotel-in 。根据酒店的等级/风格，这将是可见/不可见的。

但由于某种原因，它不会工作。

我需要做什么才能完成这项工作？

编辑 2：

我可以使用前面提到的 ngclass，并通过每个控制器/路由获取酒店状态。

但是在 PHP 和 angular1 中，我可以选择将那段样式代码放在主文件中（路由器插座所在的位置），它会按预期工作。

理想情况下，我只有一个地方将hotel-in 和hotel-out 的显示更改为切换display none 和display block。

那么在其他路由/视图中具有hotel-in 和hotel-out 的所有内容都将根据id 行事。

编辑3：

在不同路径中的 html 样式示例。

<div class=hotel-in">You are in hotel , more html...</div>
<div class="hotel-out">Something completely diff here </div>

编辑3：

即使当我使用*ngIf 样式时，它也不会在页面上生成任何带有内容的acual 标签。

编辑4：

似乎我什至无法在 angular/angular-cli html 中发布样式标签。怎么会？以及如何制作才能制作样式标签？

由于某种原因，即使这也不会出现在页面上。

  <style>
.test {
  color:black; 
}
      </style>

Answer 1

如果样式规则是使用https://github.com/deanmcpherson/angular-inline-style 写在 html 页面本身内，您会看到更改了样式规则。

这个想法是在每次范围更改时重建样式规则，默认情况下，Angular 不提供此功能。但是我们可以编写一个指令链接到样式标签并根据范围重新编译它。