嘿，针对你这个Angular登录页面多表单切换的需求，我分享几个在实际项目里常用且易维护的最佳实践，帮你搞定动态显示隐藏的逻辑：

*ngIf是Angular原生的结构型指令，它会直接在DOM中添加或移除元素，逻辑简单直观，适合不需要保留表单临时状态的场景（比如切换后表单自动重置）。

实现示例 #

组件类代码（login.component.ts）：

import { Component } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  // 用枚举类型限定视图状态，避免无效值
  currentView: 'login' | 'forgot-password' | 'reset-success' | 'reset-password' = 'login';
  isLoading = false;

  // 切换到找回密码表单
  switchToForgotPassword() {
    this.currentView = 'forgot-password';
  }

  // 发送重置请求后切换到成功提示
  sendResetLink(email: string) {
    this.isLoading = true;
    // 模拟API请求逻辑
    setTimeout(() => {
      this.isLoading = false;
      this.currentView = 'reset-success';
    }, 1500);
  }

  // 从成功提示切回登录
  backToLogin() {
    this.currentView = 'login';
  }

  // 从邮件链接进入时切换到重置密码表单
  initPasswordReset(token: string) {
    this.currentView = 'reset-password';
    // 这里可添加token验证逻辑
  }
}

模板代码（login.component.html）：

<!-- 登录表单 -->
<div class="form-container" *ngIf="currentView === 'login'">
  <h2>登录</h2>
  <form>
    <input type="email" placeholder="请输入邮箱">
    <input type="password" placeholder="请输入密码">
    <button type="submit">登录</button>
    <a href="javascript:void(0)" (click)="switchToForgotPassword()">忘记密码？</a>
  </form>
</div>

<!-- 找回密码表单 -->
<div class="form-container" *ngIf="currentView === 'forgot-password'">
  <h2>找回密码</h2>
  <form (ngSubmit)="sendResetLink(emailInput.value)">
    <input type="email" placeholder="输入绑定的邮箱" #emailInput>
    <button type="submit" [disabled]="isLoading">
      {{ isLoading ? '发送中...' : '发送重置链接' }}
    </button>
    <a href="javascript:void(0)" (click)="backToLogin()">返回登录</a>
  </form>
  <!-- 加载动画 -->
  <div class="spinner" *ngIf="isLoading"></div>
</div>

<!-- 找回密码成功提示 -->
<div class="success-container" *ngIf="currentView === 'reset-success'">
  <h3>重置链接已发送！</h3>
  <p>请检查你的邮箱，点击链接完成密码重置</p>
  <button (click)="backToLogin()">返回登录</button>
</div>

<!-- 密码重置表单 -->
<div class="form-container" *ngIf="currentView === 'reset-password'">
  <h2>重置密码</h2>
  <form>
    <input type="password" placeholder="新密码">
    <input type="password" placeholder="确认新密码">
    <button type="submit">完成重置</button>
  </form>
</div>

优点：DOM结构干净，不会留下隐藏的冗余节点，性能友好，代码逻辑清晰易维护。
缺点：切换时会销毁/重建DOM，无法保留用户输入的临时状态（比如切换回表单后输入内容会清空）。

如果需要保留用户输入的临时状态（比如用户在找回密码表单输入邮箱后，切换回登录再切回来仍能看到输入内容），可以用[hidden]或自定义CSS类来控制显示隐藏——这种方式只是通过CSS隐藏元素，DOM节点会保留在页面中。

实现示例 #

把模板中的*ngIf替换为[hidden]：

<!-- 登录表单 -->
<div class="form-container" [hidden]="currentView !== 'login'">
  <!-- 内容同上 -->
</div>

<!-- 找回密码表单 -->
<div class="form-container" [hidden]="currentView !== 'forgot-password'">
  <!-- 内容同上 -->
</div>

如果遇到[hidden]被其他CSS规则（比如父元素的display:flex）覆盖的情况，可以自定义一个更可靠的隐藏类：

.form-hidden {
  display: none !important;
}

然后在模板中使用：

<div class="form-container" [class.form-hidden]="currentView !== 'login'">
  <!-- 内容同上 -->
</div>

优点：保留DOM节点，用户输入状态不会丢失。
缺点：页面中会存在隐藏的DOM节点，极端场景下可能影响性能（但登录页面这点影响可忽略）。

如果每个表单的业务逻辑比较复杂（比如密码重置需要验证令牌、表单校验规则繁多），推荐把每个表单拆分为独立组件，通过路由来实现切换。这种方式能让代码解耦，长期维护性更强。

实现示例 #

路由配置（app-routing.module.ts）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { ResetPasswordComponent } from './reset-password/reset-password.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'forgot-password', component: ForgotPasswordComponent },
  { path: 'reset-password/:token', component: ResetPasswordComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

登录组件中的链接替换为路由链接：

<a routerLink="/forgot-password">忘记密码？</a>

优点：组件职责单一，逻辑解耦，便于单独维护和测试；可通过路由参数传递重置令牌这类数据，处理更规范。
缺点：需要额外配置路由，适合中大型项目的复杂登录流程。

• 简单登录页面、无需保留表单状态：选*ngIf
• 需要保留用户输入临时状态：选[hidden]或自定义隐藏类
• 表单逻辑复杂、需长期维护：选Angular Router拆分组件

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