使用 *ngIf 显示元素后的 Angular 4 事件

Question

我有一个演示 Here

我在组件中有一个 div，它显示为 *ngIf

我需要知道这个元素的高度。

我似乎无法在显示元素之前或在显示元素的函数中执行此操作。

是否发生了我可以用来获取高度的事件

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

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

export class ChildComponent implements OnInit, AfterViewInit {

  @Input() parent: ElementRef;

  private block: ElementRef;

  @ViewChild('block') set content(content: ElementRef) {
    this.block = content;
 }

  show: boolean = false
  blockHeight: number

  constructor(){ }

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

  ngAfterViewInit(){
    this.blockHeight = this.block.nativeElement.clientHeight;
    console.log('AfterViewInit '+this.blockHeight);
  }

  showBlock(){
    this.show = !this.show
    this.blockHeight = this.block.nativeElement.clientHeight;
    console.log('showBlock '+this.blockHeight);
  }
}

Answer 1

您需要做的是在您显示 html 元素时等待 Angular 运行其更改检测。将 setTimeout() 放入您的 showBlock() 方法中，您稍等片刻，然后定义 block 元素(它存在于 DOM 中)。您无法在元素显示之前获取元素的高度，因为它不存在于 DOM 中。

在您的 showBlock 方法中:

showBlock(){
    this.show = !this.show
    setTimeout(()=>{ // wait a tick in order to get the element of block
     this.blockHeight = this.block.nativeElement.clientHeight;
     console.log('showBlock '+this.blockHeight);
    });
  }

查看更新 Stackblitz