Angular 4获取用* ngIf隐藏的元素的高度

时间:2018-05-03 14:55:25

标签: angular typescript

我在这里有一个演示https://stackblitz.com/edit/angular-tz1yjd?file=styles.css

所以我有一个用* ngIf隐藏的组件,它会在点击一个按钮时显示。

在使用OnInit显示之前是否可以获得此组件的高度。

或者如何在单击按钮后显示高度时获得高度。

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

@Component({
  selector: 'child-comp',
  templateUrl: './child.component.html'
})

export class ChildComponent implements OnInit {

  @Input() parent: ElementRef;

  @ViewChild('block')
  block: ElementRef;

  show: boolean = false
  blockHeight: number

  constructor(){ }

  ngOnInit(){
    this.blockHeight = this.block.nativeElement.clientHeight;
  }


  showBlock(){
    this.show = !this.show
    this.blockHeight = this.block.nativeElement.clientHeight;
  }

1 个答案:

答案 0 :(得分:0)

希望我的回答将来会有所帮助。有时,您可以使用简单的策略来呈现元素,但可以通过类绑定来控制其可见性

[class.d-none]="conditionChecker()"

[class.invisible]="conditionChecker()"