隐藏 HTML 元素但保持其角度间距

Question

我正在从事 Angular 11 项目。

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

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

我可以添加一个条件类，其中该类的可见性为隐藏，但我试图确认 Angular 是否有这方面的指令/属性。

我在这里擦掉了一个演示：https://stackblitz.com/edit/hide-element-angular
?file=src/app/autocomplete-auto-active-first-option-example.html 这显示了隐藏和 ngIf 没有保留间距，而条件类则保留间距。

Answer 1

该问题是CSS问题，即bootstrap/CSS框架[hidden]定义已display: none定义。班级hide理所应当如此visibility: hidden;。

如果我们添加：

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

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

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

[hidden] {
  display: none !important;
}

并且很难推翻这一点!important。