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

Question

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

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

基本上我希望我的 class .navigation--overlay 设置为 window (window.innerHeight)

的高度

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

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

Answer 1

这可能会满足您的要求：

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

Answer 2

你可以只使用 CSS 来做这个吗？

设置 class 然后 class 高度：100%?

类似于：

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

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

Using dynamic value in css in Angular 2

height

angularjs

angular2-directives

angular2-template

angular