Angular 5中ngHide、ngShow及[hidden]无法正常工作问题求助

你踩了一个Angular版本差异的坑！你用的ngHide、ng-show这些都是AngularJS（1.x）时代的指令，Angular 2+（包括你用的Angular 5）已经完全抛弃了这些旧指令，所以它们自然不会生效。下面给你三种Angular 5里正确实现显示/隐藏的方法：

1. 用*ngIf指令（推荐，直接操作DOM） #

这个指令会直接把元素从DOM中添加或移除，适合不需要保留元素占位的场景。你已经在组件里定义了isHidden: boolean = true，直接在模板里这么用：

<!-- 当isHidden为true时元素被移除，false时显示 -->
<div *ngIf="!isHidden">需要显示/隐藏的内容</div>

如果要切换状态，给组件加个方法：

// login.component.ts里添加
toggleShow() {
  this.isHidden = !this.isHidden;
}

模板里加个触发按钮：

<button (click)="toggleShow()">切换显示状态</button>

2. 用[hidden]属性（保留DOM元素） #

这个方式是通过CSS的display: none隐藏元素，元素依然存在于DOM中。但要注意：如果你的元素有自定义的display样式，可能会覆盖[hidden]的效果，所以建议在组件CSS里加个兜底样式：

模板代码：

<div [hidden]="isHidden">通过[hidden]控制的内容</div>

组件CSS：

[hidden] {
  display: none !important;
}

3. 绑定CSS类（灵活控制样式） #

如果需要给隐藏/显示状态加过渡动画或者自定义样式，用类绑定更合适：

模板代码：

<div [class.hidden]="isHidden">通过类控制的内容</div>

组件CSS：

.hidden {
  display: none;
  /* 或者用visibility: hidden; 这样会保留元素占位 */
  /* 还可以加过渡动画：transition: all 0.3s ease; */
}

记得要确保你的isHidden变量能被正确触发改变，比如通过按钮点击、输入框变化等事件来切换它的值，这样显示/隐藏功能才能正常工作。

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