如何在 <div> .ts 文件中获取高度

Question

我正在使用离子标签来设计我的应用程序，在我的一个屏幕上，我想要<div>标签的高度，并希望计算下一个视图高度

任何想法如何在我的 .ts 文件中在运行时获得<div>高度？

代码：

 <div *ngIf="affectedItemsViewShowFlag" class="affected-items-list-style" [style.height.%]="height">
      <ion-list *ngSwitchCase="'affected item'" class="list-style">
        <ion-grid no-padding>
          <ion-row *ngFor="let keyValue of affectedItemJsonKeyValues">
            <ion-col col-6>
              <ion-item>
                <ion-label class="key-font-style">{{ keyValue }}</ion-label>
              </ion-item>
            </ion-col>
            <ion-col col-6>
              <ion-item class="column-remove-padding">
                <ion-label class="value-font-style">{{ faCaseDetails.affected_item[keyValue] }}</ion-label>
              </ion-item>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-list>
    </div>

在上面的 <div>中，我的高度像 [style.height.%]="height"一样动态，我正在从我的 ts 文件中获取它。

，但在此之前，我想要上一个部分的<div>高度。

任何帮助！

预先感谢！

Answer 1

即使var height = document.getElementById('myDiv').offsetHeight;可以使用，这也不是访问Angular应用程序中DOM的最佳方法。

必须在可能的情况下避免直接访问对DOM的访问。

更好的方法是通过在视图中使用模板变量：

<ion-header>
...
</ion-header>
<ion-content padding>    
  <div #target style="background-color:yellow; height:100px;"></div>    
  <p>The height of the div is: {{ result }}px</p>
</ion-content>

然后使用ViewChild在组件代码中获取该元素：

import { Component, ViewChild } from '@angular/core';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('target') targetElement: any;    
  result: string;
  constructor() {}
  ngOnInit() {
    // Get the height of the element
    const height = this.targetElement.nativeElement.offsetHeight;
    // Here you can use the height!
    this.result = height;
    console.log(height);
  }
}

请查看此工作stackblitz demo 。