有可能获得离子脚的高度？

Question

我试图让初始窗口高度减去离子页脚高度。 我成功但是窗口高度仍然是我的页脚高度。 有可能获得离子 - 页脚离子2元素的高度吗？

  

我不需要获得离子含量高度

<ion-footer>
  <button type="submit" form="loginForm" ion-button block class="rnb-button" [disabled]="!loginForm.valid">Log In</button>
</ion-footer>

TS

this.gridHeight = window.innerHeight;

我需要什么

this.gridHeight = window.innerHeight - footerHeight;

感谢。

Answer 1

是的，您可以使用对内容的引用来使用contentBottom属性获取页脚的高度：

  

contentBottom：一个数字，表示底部有多少像素   内容已经调整，可以通过填充或填充   余量。 此调整是为了占用所需的空间   页脚

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  ionViewDidEnter() {
    if(this.content) {
      console.log(`Footer height: ${this.content.contentBottom}`);
    }
  }
}

修改

这只是一个建议，但您应该使用window.innerHeight来获取该信息，而不是使用platform，因为：

  

在幕后，platform使用window.innerWidth和。{   window.innerHeight但是使用此方法是首选，因为   dimension是一个缓存值，可以减少多个和多个的机会   昂贵的DOM读取。

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({...})
export MyApp {
  constructor(platform: Platform) {
    platform.ready().then((readySource) => {
      console.log('Width: ' + platform.width());
      console.log('Height: ' + platform.height());
    });
  }
}