Question

新问题：

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

这两个类将在我的所有22个组件中。要切换显示，请使用名为inHotel的变量，该变量包含用户在酒店的任何位置。

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

当变量为false时，hotel-out将为visible，并且酒店输入将被隐藏。

我如何以最佳方式实现这一目标？这是我在主控制器中可以做的一般情况，它会加载所有组件吗？

或者我是否必须在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是假的，它也会产生这种风格。

这个想法是一个函数将在inhotel中切换。

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

但由于某种原因它不会起作用。

我需要做些什么来完成这项工作？

编辑2：

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

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

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

然后，其他路线/视图中包含hotel-in和hotel-out的所有内容都将按照ID进行操作。

EDIT3：

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

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

EDIT3：

即使是im style *ngIf，也不会在页面上生成包含内容的任何语言标记。

edit4：

似乎我甚至无法在angular / angular-cli html中发布样式标记。怎么会？我怎么能这样做，我可以制作样式标签？

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

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

Answer 1

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

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

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

1 个答案: