Как я могу получить высоту элемента, когда он свернут в DOM в Angular / Typescript

Question

Я пробовал ngOnInit (), но безуспешно. Аккордеон тоже не работает. Вот мой html:

<div [hidden]="advancedFiltersAreShown" #searchDiv></div>
<button *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown; minHeightOfTable();"></button>

.ts код:

 @ViewChild('searchDiv', { static: true }) elementView: ElementRef;
 primeTableHeight = '';
 advancedFiltersAreShown = true;

 minHeightOfTable(): string {
        const heightOfPage = window.innerHeight;
        const heightOfSearchView = this.elementView.nativeElement.offsetHeight;
        var newHeight = heightOfPage - heightOfSearchView;
        this.primeTableHeight = newHeight + 'px';
        return this.primeTableHeight;

    }

Answer 1

Как я понял из вашего кода, у вас есть кнопка, которая сворачивает ваш элемент div, поэтому вы хотите изменить размер другого элемента на своей странице после сворачивания / открытия вашего div (Custom Accordion). Давайте представим, что у вас есть два DIV и кнопка, чтобы свернуть / открыть первый DIV.

<div #container>
    <button *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown; calculateElementSize();"></button>
    <div #searchDiv>
    </div>
    <div #otherElement>
    </div>
</div>

Вам необходимо внедрить обработчик событий для вашей кнопки, чтобы изменить размер вашего второго div в соответствии с разрешением ваших клиентов.

Итак, прежде всего вы должны объявить функцию calculateElementSize() и пройти следующие шаги:

• Получить высоту основного #container DIV или тела, которое ваши элементы визуализировали в нем.
• Получить высоту первого (Поиск) плавающего DIV.
• Вывести #searchDIV высоты из #container height's
• Установить результат вычитания на #otherElement height's
• Установить calculateElementSize() на событие вашей кнопки и windows событие изменения размера.

Позволяет сделать это:

import { Component, ViewChild, HostListener, AfterViewInit } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage implements AfterViewInit {

  @ViewChild('container', { static: true }) containerElement: any;
  @ViewChild('searchDIV', { static: true }) searchElement: any;
  @ViewChild('otherElement', { static: true }) otherElement: any;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
      this.calculateElementSize();
  }

  advancedFiltersAreShown = true;

  constructor() {}

  ngAfterViewInit() {
    this.calculateElementSize();
  }

  calculateElementSize() {
    const containerHeight = this.containerElement.nativeElement.offsetHeight;
    const searchHeight = this.searchElement.nativeElement.offsetHeight;

    this.otherElement.nativeElement.offsetHeight = containerHeight - searchHeight;
  }

}