如何在页面内切换组件？点击按钮替换登录组件而非路由跳转

要在原位置无缝切换登录、忘记密码、注册这三个组件，你可以借助Angular的条件渲染指令（*ngIf 或 ngSwitch）配合组件间通信来实现，全程不需要路由跳转。下面是具体的分步实现方案：

1. 创建父组件作为容器 #

首先需要一个父组件（比如命名为 AuthContainerComponent），用来承载这三个子组件，所有切换逻辑都在这个父组件里统一控制。

父组件TS代码 #

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

@Component({
  selector: 'app-auth-container',
  templateUrl: './auth-container.component.html',
  styleUrls: ['./auth-container.component.css']
})
export class AuthContainerComponent {
  // 定义当前显示的视图状态，默认显示登录组件
  currentView: 'signin' | 'forgot' | 'signup' = 'signin';

  // 切换视图的核心方法
  switchView(view: 'signin' | 'forgot' | 'signup') {
    this.currentView = view;
  }
}

父组件HTML代码 #

这里用 ngSwitch 实现条件渲染（比多个*ngIf更清晰，组件数量多的时候优势明显）：

<div class="auth-container">
  <!-- 根据currentView的值切换显示对应的组件 -->
  <ng-container [ngSwitch]="currentView">
    <app-sign-in 
      *ngSwitchCase="'signin'"
      (onForgotPassword)="switchView('forgot')"
      (onSignUp)="switchView('signup')"
    ></app-sign-in>

    <app-forgot-password
      *ngSwitchCase="'forgot'"
      (onBackToSignIn)="switchView('signin')"
    ></app-forgot-password>

    <app-sign-up
      *ngSwitchCase="'signup'"
      (onBackToSignIn)="switchView('signin')"
    ></app-sign-up>
  </ng-container>
</div>

2. 子组件添加事件发射器 #

每个子组件需要通过@Output()事件发射器，触发父组件的视图切换动作：

登录组件（sign-in.component.ts） #

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html'
})
export class SignInComponent {
  // 点击"Forgot Password"时触发的事件
  @Output() onForgotPassword = new EventEmitter<void>();
  // 点击"Do not have an account?"时触发的事件
  @Output() onSignUp = new EventEmitter<void>();
}

登录组件HTML（sign-in.component.html） #

在按钮上绑定事件触发逻辑：

<!-- 你的登录表单内容 -->
<form>
  <!-- 用户名、密码输入框等控件 -->
</form>

<!-- 忘记密码按钮 -->
<button (click)="onForgotPassword.emit()">Forgot Password?</button>

<!-- 注册引导按钮 -->
<button (click)="onSignUp.emit()">Do not have an account? Sign Up</button>

忘记密码组件（forgot.component.ts） #

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-forgot-password',
  templateUrl: './forgot.component.html'
})
export class ForgotPasswordComponent {
  // 点击返回登录时触发的事件
  @Output() onBackToSignIn = new EventEmitter<void>();
}

忘记密码组件HTML（forgot.component.html） #

<!-- 你的忘记密码表单内容 -->
<form>
  <!-- 邮箱输入框等控件 -->
</form>

<!-- 返回登录按钮 -->
<button (click)="onBackToSignIn.emit()">Back to Sign In</button>

注册组件（sign-up.component.ts） #

和忘记密码组件逻辑一致：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html'
})
export class SignUpComponent {
  @Output() onBackToSignIn = new EventEmitter<void>();
}

注册组件HTML（sign-up.component.html） #

<!-- 你的注册表单内容 -->
<form>
  <!-- 用户名、邮箱、密码等输入框控件 -->
</form>

<!-- 返回登录按钮 -->
<button (click)="onBackToSignIn.emit()">Back to Sign In</button>

3. 组件注册到模块 #

别忘了在你的Angular模块（比如AuthModule或AppModule）里声明这四个组件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthContainerComponent } from './auth-container.component';
import { SignInComponent } from './sign-in.component';
import { ForgotPasswordComponent } from './forgot-password.component';
import { SignUpComponent } from './sign-up.component';

@NgModule({
  declarations: [
    AuthContainerComponent,
    SignInComponent,
    ForgotPasswordComponent,
    SignUpComponent
  ],
  exports: [AuthContainerComponent] // 如果要在其他组件中使用父容器，需要导出
})
export class AuthModule { }

可选：用*ngIf替代ngSwitch #

如果你觉得ngSwitch太繁琐，也可以用多个*ngIf实现，父组件HTML改成这样：

<div class="auth-container">
  <app-sign-in 
    *ngIf="currentView === 'signin'"
    (onForgotPassword)="switchView('forgot')"
    (onSignUp)="switchView('signup')"
  ></app-sign-in>

  <app-forgot-password
    *ngIf="currentView === 'forgot'"
    (onBackToSignIn)="switchView('signin')"
  ></app-forgot-password>

  <app-sign-up
    *ngIf="currentView === 'signup'"
    (onBackToSignIn)="switchView('signin')"
  ></app-sign-up>
</div>

这种实现方式的优势很明显：

• 完全在原地切换组件，没有路由跳转的页面刷新感
• 状态切换逻辑集中在父组件，便于后续维护和扩展
• 子组件只负责触发事件，无需关心路由或其他逻辑，职责更单一

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