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

【问题标题】：Angular 4 get height of element thats hidden with *ngIfAngular 4 获取使用 *ngIf 隐藏的元素的高度
【发布时间】：2019-02-01 19:55:34
【问题描述】：

我在这里有一个演示 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;
  }

【问题讨论】：

我认为您无法获取它..因为它没有在 DOM 中呈现..如果您需要它，请使用 [hidden].. 希望它对您有所帮助！
是的，我相信费德里科是对的。通常，无论何时您尝试从 DOM 读取计算的属性（如宽度或高度），您都应该使用“AfterViewInit”生命周期挂钩而不是“OnInit”，因为视图未在 OnInit 中完全初始化，并且许多属性将未定义。但就像他说的那样，ngIf 会阻止它被渲染，所以在渲染之前你将无法读取高度。使用其他方法，例如绑定到隐藏或更改可见性。
我想过 [hidden] 但实际代码有很多使用 *ngIf 的元素，我需要找到它的高度。 Hidden 会将它们全部添加到 DOM 中
AfterViewInit 在此处不起作用 - stackblitz.com/edit/… showBlock 起作用，但仅在单击 seconf 之后。
我会看看这个：stackoverflow.com/questions/50170449/… 正如其他人所提到的，[hidden] 会将它保留在 dom 上，但如果你需要它关闭 dom，你可以拥有 @ViewChild在 setter 上，当它被放置在 dom 上时会被调用。然后在那里你可以得到元素的高度。不过请注意，如果您使用的是组件而不是原生 html 元素，则需要将 ElementRef 替换为组件的类。

标签： angular typescript

【解决方案1】：

希望我的回答对未来有所帮助。有时你可以使用简单的策略来渲染一个元素，但通过类绑定来控制它的可见性

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

或

[class.invisible]="conditionChecker()"

【讨论】：