Angular中隐藏HTML元素且保留其占用空间的方案咨询

核心结论 #

Angular 2+ 全版本（含Angular 11）未内置直接对应AngularJS中ng-show/ng-hide、可隐藏元素同时保留布局占位的专属指令，*ngIf、[hidden]不符合需求的情况完全符合官方设计逻辑：

• *ngIf：会根据条件直接在DOM树中添加/移除元素，元素不存在时自然不会占用布局空间
• [hidden]属性绑定：底层依赖浏览器内置的hidden属性，默认会给元素添加display: none !important样式，display: none的元素同样不参与布局计算，不会保留占位

原生支持的实现方案 #

无需引入第三方依赖，直接使用Angular内置的绑定能力即可实现需求，常用有两种写法：

1. 直接绑定visibility样式 #

无需额外定义CSS类，直接用Angular样式绑定语法一行实现：

<!-- isShow为true时显示，false时隐藏并保留占位 -->
<div [style.visibility]="isShow ? 'visible' : 'hidden'">目标元素内容</div>

2. 封装自定义指令（高频使用场景推荐） #

如果项目中多处需要该能力，可以自行封装一个极简的自定义指令，用法和原AngularJS的ng-show完全一致：
第一步：创建指令文件

import { Directive, Input, ElementRef } from '@angular/core';

@Directive({
  selector: '[appShow]'
})
export class AppShowDirective {
  @Input() set appShow(condition: boolean) {
    this.el.nativeElement.style.visibility = condition ? 'visible' : 'hidden';
  }

  constructor(private el: ElementRef) {}
}

第二步：在对应模块的declarations数组中引入该指令后即可使用：

<div [appShow]="isShow">目标元素内容</div>

内容的提问来源于stack exchange，提问作者ineedtoknow