Событие Angular 4 после элемента, отображаемого с * ngIf

Question

У меня есть демо Здесь

У меня есть 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

Вы можете использовать скрытый вместо ngIf: -

<div>
  <button (click)="showBlock()">Show Block</button>
</div>
<div class="child-component" [hidden]="show" #block>
  <a href="">Link</a>
  <a href="">Link</a>
  <a href="">Link</a>
  <a href="">Link</a>
</div>

И используйте для удаления display: block из класса .child-component.

Answer 2

Я также столкнулся с подобной ситуацией, в которой мой Angular-компонент визуализировался после условия ngIf, и я хотел использовать высоту элемента, чтобы получить некоторый класс. Как сказал Джон выше, «вам нужно дождаться, пока Angular запустит обнаружение изменений, когда вы покажете свой html-элемент». Но в его ответе иногда возникает проблема, мы можем не знать, сколько времени требуется для обнаружения изменения времени, поэтому в моем случае галочка не сработала. Поскольку нет способа перехватить событие * ngIf, то, что я сделал как хак, снова вызвал функцию внутри функции, которой нужна высота элемента, если высота элемента равна 0. См. Ниже

showBlock(){
  let self = this;
  this.show = !this.show
  if(this.show && this.block.nativeElement.clientHeight == 0){
    setTimeout(() => { 
               self.showBlock();
     },500); // After a tick execute again
    return;
   }//End If

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

Answer 3

Что вам нужно сделать, это дождаться, пока Angular запустит обнаружение изменений, когда вы покажете свой html-элемент. Помещая setTimeout() в ваш showBlock() -метод, вы ждете галочку, а затем определяется элемент блока (он присутствует в 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