Typescript 在<；中获取画布的初始高度/宽度；离子含量>；

我有一个带有标题和拆分窗格菜单的IONIC4/Angular8设置。 然后我将JS引擎加载到

#canvas

内部

的视图子级中

因此，我需要正确设置画布的高度和宽度。 使用

窗口。innerHeight

/

窗口。innerWidth

将始终包括菜单和标题

我有一个工作窗口调整Eventlistener，但是第一个初始视图总是被扭曲

我的问题是，如何动态地获得画布的宽度和高度？

canvas.nativeElement.clientHeight

是我的假设-但我总是收到一个0

有什么提示吗

更新

我尝试了@rtpHarry答案的建议解决方案-以下是我的结果：

您可以在（1）处查看我的内容画布，在（2）处查看我的菜单。如果查看控制台（3）中的输出，则显示画布的正确高度，但宽度仍包括菜单。如果将我输出window.innerwidth的（3）和（4）进行比较，这将进一步突出显示。标题会被扣除，但菜单不会

这些是我用的东西。。。

尝试以下方法（完整代码）：

---

您要寻找的技巧是找到离子含量的大小，这可以使用以下方法完成：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { IonContent } from '@ionic/angular';

export class HomePage implements OnInit {
  @ViewChild(IonContent, { static: true }) private content: IonContent;

  constructor() { }

  ngOnInit() {
    this.content.getScrollElement().then(scrollElement => {
      console.log("clientHeight: ", scrollElement.clientHeight);
      console.log("clientWidth: ", scrollElement.clientWidth);
      console.log("scrollHeight: ", scrollElement.scrollHeight);
      console.log("scrollWidth: ", scrollElement.scrollWidth);
    });
  }
}

客户端宽度和高度是离子内容的宽度和高度

如果内容比当前页面长，并且您有滚动条，则滚动宽度和高度将设置为这些值

这是我得到的输出，我用devtools确认了这一点：

您不能使

ngOnInit

async，但根据您执行此操作的位置，您可以执行以下异步版本：

  async someOtherFunction() {
    const scrollElement = await this.content.getScrollElement();
    console.log("clientHeight: ", scrollElement.clientHeight);
    console.log("clientWidth: ", scrollElement.clientWidth);
    console.log("scrollHeight: ", scrollElement.scrollHeight);
    console.log("scrollWidth: ", scrollElement.scrollWidth);
  }

更新 我用我目前正在构建的仪表板对其进行了测试，它确实为我提供了正确的离子含量尺寸：

我添加了一个按钮（1），它输出（2），并对照splitpane（3）检查它是否匹配，除了一些亚像素舍入

---

页面上是否有其他内容溢出并影响它？因为一开始我确实看到一个

ng datatable

组件出现了一些差异，但是当我把它注释掉，只留下了基本的数字。您好，谢谢您的回答。不幸的是，这并不能解决我的问题。我可能没有很好地解释我的问题。我知道画布的默认宽度/高度以及如何设置。我的问题是动态读取画布在窗口内的空间（window.height size减去header size.height，window.width减去menu size.width），以便在以后正确设置它。我的问题的详细说明可以在这里找到：谢谢@rtpHarry。这部分解决了我的问题。它给了我正确的高度。如果我的

隐藏在汉堡包菜单中，我就能得到正确的宽度。但是如果

全屏显示，则宽度不正确。它包括

-宽度。您知道动态获取

宽度的方法吗？如果是，我可以很容易地从内容菜单中减去它。这会解决我的问题。好的，如果有帮助的话，请考虑一下投票。当我进入办公室时，我会安装一个演示应用程序，并解决这个问题。我认为，这种技术可以应用于任何组件，因此我的计划是制作一个IonMenu版本的

@ViewChild（IonContent，null）私有内容：IonContent然后应用相同的技术获取尺寸。谢谢。期待您的演示应用程序！我投了你一票。我在标记中看到的是什么？我想这就是你们两种宽度差异的原因。div不能作为块级项目使用，它可以浮动或是浮动到一行中，不知道具体是什么，但它的行为不像您预期的那样像普通html。poweredBy

只是一个包含文本的div。但这并不影响结果。我在没有它的情况下试过，结果也是一样。您知道一种方法可以动态获取

的宽度，它是

的一部分。我尝试了

@ViewChild

方法，但找不到宽度。有进一步的提示吗？

  async someOtherFunction() {
    const scrollElement = await this.content.getScrollElement();
    console.log("clientHeight: ", scrollElement.clientHeight);
    console.log("clientWidth: ", scrollElement.clientWidth);
    console.log("scrollHeight: ", scrollElement.scrollHeight);
    console.log("scrollWidth: ", scrollElement.scrollWidth);
  }