隐藏 HTML 元素但保持其间距 Angular

Question

我在 Angular 11 项目中工作。

我知道有 ngIf 指令，如果设置为 true，它只会显示 html 元素，但不会保留间距。

在旧的 AngularJS 中，有 ng-show 和 ng-hide。这些属性将 show/hide 一个元素，但保持其间距（有效地将 css 的可见性设置为隐藏）。但是 Angular 不再具有这些属性。相反，他们建议绑定到隐藏的属性 (https://angular.io/guide/ajs-quick-reference#ng-show).
然而，这并没有保留间距（这在我看来很奇怪）。
Angular 是否有隐藏元素同时保留其间距的指令？

我可以添加一个条件 class，其中 class 具有隐藏的可见性，但我试图确认 Angular 是否为此具有 directive/property。

我在这里删除了一个演示：https://stackblitz.com/edit/hide-element-angular?file=src/app/autocomplete-auto-active-first-option-example.html
这表明隐藏和 ngIf 不保留间距，而条件 class 会。

Answer 1

该问题是一个 CSS 问题，即 bootstrap/CSS 框架 [hidden] 定义已定义 display: none。 hide class 理所当然地 visibility: hidden;.

如果我们添加：

.inner-div[hidden] {
  visibility: hidden;
  display: block !important;
}

到styles.scss，它将解决问题。

将 .inner-div 作为定义的一部分可能不好，但它很难，因为 CSS 框架的定义是：

[hidden] {
  display: none !important;
}

并且很难覆盖 !important。

隐藏 HTML 元素但保持其间距 Angular

Hide HTML Element but Keep It's Spacing In Angular

angular-directive

angular