如何在 Angular CLI V12 中为 div 制作可变 CSS 高度

Posted 2023-02-22

【中文标题】如何在 Angular CLI V12 中为 div 制作可变 CSS 高度

【英文标题】：How to make a variable css height for a div in Angular CLI V12

【发布时间】：2022-01-10 18:25:06

【问题描述】：

我对在 Angular 中进行开发还很陌生，我想要一些帮助来找到在 Angular CLI V12 中创建可变 CSS 高度的最佳方法。为了简化我的问题，我将按如下方式提出我的问题。我有三个盒子，如下所示。

盒子图片：

这三个盒子由三个组件组成。代码如下。

app.component.html：

<app-top></app-top>
<app-center></app-center>
<app-bottom></app-bottom>

***组件：

.box 
    width: 500px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    margin: 0;

<div class="box">top box</div>

中心组件：

.box 
    width: 500px;
    height: 100px;
    padding: 10px;
    border: 5px solid green;
    margin: 0;

<div class="box">center box</div>

底部组件：

.box 
    width: 500px;
    height: 100px;
    padding: 10px;
    border: 5px solid yellow;
    margin: 0;

<div class="box">bottom box</div>

我在这里要做的是通过我的 Angular 项目的打字稿部分中的变量动态更改中心框的高度。我不认为我在这里尝试做的事情那么复杂，但是如果您是开发领域的新手，我在网上找到的所有资源都有些过时并且有点令人困惑。这样做的最佳方法是什么？谢谢。

【参考方案1】：

您可以只使用 ngStyles 为 html 标签添加样式。 例如：

<div class="box" [ngStyle]="'height': myCustomHeight">center box</div>

这里的“myCustomHeight”将是您可以在打字稿中相应更改其值的变量。