Angular 2,在@Component样式中使用变量

时间:2018-04-24 13:34:56

标签: angular

我这里有一个傻瓜 - https://plnkr.co/edit/fzNJ7FLYxWbLPoxtYpEw?p=preview

它是一个简单的角度应用程序。

我使用@ViewChild和nativeElement.offsetHeight

捕捉div的高度

是否可以在组件的样式块中使用此编号。

在我的例子中,我尝试了它,但是将其公之于众。

@Component({
  selector: 'my-app',
  templateUrl: './src/app.html',
  styles: [`
    .blockTwo {
      background: yellow;
      //height: this.contentHeight+px;
      height: 200px;
    }
  `]
})

=

import {Component, ElementRef, ViewChild, AfterViewInit} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './src/app.html',
  styles: [`
    .blockTwo {
      background: yellow;
      //height: this.contentHeight+px;
      height: 200px;
    }
  `]
})

export class AppComponent implements AfterViewInit{

  @ViewChild('content') 
  elementView: ElementRef;

  contentHeight: number;

  constructor() {

  }

  ngAfterViewInit() {
      this.contentHeight = this.elementView.nativeElement.offsetHeight;
  }

}

3 个答案:

答案 0 :(得分:2)

这可以使用ngStyle

在你的app.html中将黄色div更改为:

<div class="blockTwo" [ngStyle]="style">
</div>

并在你的app.ts

style: any;
ngAfterViewInit() {
  this.contentHeight = this.elementView.nativeElement.offsetHeight;
  this.style = {"height": this.contentHeight+"px"}
}

答案 1 :(得分:1)

你可以这样做

//this line is exaple , but point is make use of ngStyle
<some-element [ngStyle]="{'max-height.px': height}">...</some-element>

并在你的ts文件中定义和初始化height,这对你有用

或此类帮助

<div #parentdiv style="background-color:blue;height:1000px">
  <div [ngStyle]="{'max-height.px': parentdiv.offsetHeight}">
    hallo
  </div>
</div>

答案 2 :(得分:1)

用户[ngStyle]指令。

<div class="content" #content [ngStyle]="{'height':'contentHeight'}">

</div>

<div>
  <h2>{{contentHeight}}</h2>

  <div class="blockTwo">

  </div>
</div>