如何在 angular 中獲得模態的視口高度？

Question

我想知道是否有可能在我的 Angular 應用程序中獲得我的 ng boostrap 模態的視口高度。 這是我所擁有的：

• 具有 css 樣式的模態如下：

.modal-xxl {
  width: 95% !important;
  max-height: 90% !important;
  max-width: 95% !important;
  height: 90% !important;

  .component-host-scrollable {
    height: 100%;
  }
}

• 在模態中，我有一個 ng zorro 表，我需要它是可滾動的
• 我想根據此計算更改可滾動高度： calc(100vh - 221,09px)以便如果我調整屏幕大小，滾動高度也會調整大小

---

• 我不知道如何在 html 文件中獲得100vh 。
• 現在 ngzorro 表的nzScroll屬性只接受一個以 px 為單位的數字。 我嘗試這樣做： viewHeight = window.innerHeight在我的 ts 組件上，然后將其放入 html 中，如下所示： [nzScroll]="{ y: ' {{viewHeight}}px' }"但它不起作用（我甚至不能滾動表格）。 如果有人能幫忙，我會永遠感謝他哈哈哈

Answer 1

好的，所以我的問題是：

[nzScroll]="{ y: 'calc(100vh - 276.09px)'}"

由於這一點而沒有工作. 在計算中。

所以我把它改成：

[nzScroll]="{ y: 'calc(100vh - 276px)'}"

現在工作得很好。 如果有人想知道我是如何得到那個276px的，我基本上做了所有固定大小的模態元素的總和，例如：

• 模態 header： 69px
• 模態頁腳： 65px
• 然后表格高度為： 142px

因此，現在如果我決定調整 window 的大小，表格滾動條也將調整大小。

這是之前的：

這就是之后：

如您所見，如果我增加表格的大小，表格不會溢出模態導致他啟用滾動條，它只是調整自身的大小以保持在模態邊界內。