在Angular 2的css中使用动态值答案

【问题标题】：Using dynamic value in css in Angular 2在Angular 2的css中使用动态值
【发布时间】：2016-09-14 16:16:21
【问题描述】：

我将如何动态更新仅在单击时才出现的叠加层的 CSS。这是我的 html 的一部分：

<nav class="navigation" [class.navigation--overlay]="isItOpen">
</nav>

基本上我希望我的班级.navigation--overlay 设置为窗口的高度(window.innerHeight)

我可以在我的组件上设置一个变量吗：

@Component({
  selector: 'poodles',
  templateUrl: 'app/doodles.html',
  styles: [`
    .navigation--overlay {
      background: $MyColor;
    }
  `]
  providers: [DuhService]
})

【问题讨论】：

“我希望我的类 .navigation--overlay 设置为窗口的高度 (window.innerHeight)”是什么意思？您可以设置或删除一个类。您通常不会为类设置值。
是的，当我设置我的类时 .navgation--overlay 我想要一个可以获取 window.innerHeight 值的函数，然后我的类将高度设置为该值。
一个类怎么会有高度？
您的意思是所有与选择器与该类匹配的元素都应该应用该高度？
是的，所有匹配选择器的元素都应该应用该类。

标签： angularjs angular height angular2-template angular2-directives

【解决方案1】：

这可能会做你想做的事：

<nav class="navigation" [ngStyle]="isItOpen ? {'height.px': windowHeight} : {}">
</nav>

【讨论】：

这不起作用。该页面只是为我挂起。我需要在别处定义 ngStyle 吗？
我想监听窗口大小调整事件并设置属性windowHeight然后使用ngStyle]="isItOpen ? {height: windowHeight} : {}"会更好。我不知道您是如何实现getWindowHeight() 的，但是从视图中调用方法很容易引起麻烦，因为它可能效率低下。我猜你的浏览器挂了，因为这太慢了（它经常被调用）。
我只是设置了 height:300px 而没有调用 getWindowheight 只是为了看看它是否会通过而它没有。
你是怎么做到的？ [ngStyle]="isItOpen ? {height: '300px'} : {}"?你能试试null而不是{}吗？

【解决方案2】：

你可以只使用 CSS 来做到这一点吗？

设置班级然后就只有班级高度：100%？

类似：

  styles: [`
    .navigation--overlay {
      background: $MyColor;
      height:100%;
    }
  `]

【讨论】：

这是我最初拥有的，但我正在尝试解决一个特定于 iphone 的错误，当我向上滚动一点然后打开我的覆盖时。即使我设置了叠加层，它也不是 100% 的高度。我仍然可以在底部看到它背后的内容。