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);
  }

}

请查看 working stackblitz demo 。

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

1 个答案: