我这里有一个傻瓜 - 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;
}
}
答案 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>