Angular 14：动态显示与隐藏子组件实现登录/注册表单切换

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Angular 14：动态显示与隐藏子组件实现登录/注册表单切换

2025-10-18

浏览次数：次

返回列表

angular 14：动态显示与隐藏子组件实现登录/注册表单切换

本文将介绍如何在 Angular 14 中实现动态显示和隐藏子组件，以创建一个在登录和注册表单之间切换的交互式界面。通过控制组件的显示与隐藏，我们可以在 Bootstrap Offcanvas 组件中实现登录和注册表单的无缝切换，从而提升用户体验。本文将提供清晰的代码示例和详细的步骤，帮助你理解和实现这一功能。

实现组件的动态显示与隐藏

要在 Angular 中实现组件的动态显示与隐藏，通常可以使用以下方法：

*使用 `ngIf指令:***ngIf指令可以根据表达式的值来决定是否渲染组件。如果表达式为true，则组件会被渲染；如果为false`，则组件不会被渲染。
使用 CSS 类: 通过添加或移除 CSS 类，可以控制组件的 display 属性，从而实现显示或隐藏组件的效果。

在本例中，我们将使用 *ngIf 指令来控制 login 和 register 组件的显示与隐藏。

具体实现步骤

创建组件： 首先，确保你已经创建了 LoginComponent 和 RegisterComponent。

在父组件中定义变量： 在父组件（例如 N*barComponent）中，定义两个布尔类型的变量，用于控制 login 和 register 组件的显示状态。

// n*bar.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-n*bar',
  templateUrl: './n*bar.component.html',
  styleUrls: ['./n*bar.component.css']
})
export class N*barComponent {
  showLogin: boolean = true;
  showRegister: boolean = false;

  toggleToRegister() {
    this.showLogin = false;
    this.showRegister = true;
  }

  toggleToLogin() {
    this.showLogin = true;
    this.showRegister = false;
  }
}

*在父组件的模板中使用 `ngIf指令：** 在父组件的模板（例如n*bar.component.html）中使用*ngIf指令来控制login和register` 组件的显示与隐藏。

AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

87 查看详情 AI Surge Cloud

<!-- n*bar.component.html -->
<n* class="n*bar">
   <div class="container-fluid">
       <div class="d-flex">

           <a href="" class="n*-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Log in</a>
           <div class="offcanvas">
               <div class="offcanvas-body">
                   <app-login *ngIf="showLogin"></app-login>
                   <app-register *ngIf="showRegister"></app-register>
               </div>
           </div>

       </div>
   </div>
</n*>

在子组件中触发事件： 在 login.component.html 和 register.component.html 中，为切换按钮添加点击事件，并分别调用父组件中定义的方法来切换显示状态。需要使用 @Output 装饰器在子组件中定义事件发射器，并在父组件中监听这些事件。

// login.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  @Output() registerClicked = new EventEmitter<void>();

  onRegisterClick() {
    this.registerClicked.emit();
  }
}

<!-- login.component.html -->
<!-- Offcanvas -->
<div>
   <!-- Form -->
   <div>
       <form>
           <!-- Form inputs and labels-->
           <div>
               <p> Don't h*e an account? <a href="#" (click)="onRegisterClick()">Register</a></p>
           </div>
       </form>
   </div>
   <!-- Form end -->
</div>
<!-- Offcanvas end -->

// register.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent {
  @Output() loginClicked = new EventEmitter<void>();

  onLoginClick() {
    this.loginClicked.emit();
  }
}

<!-- register.component.html -->
<!-- Offcanvas -->
<div>
   <!-- Form -->
   <div>
       <form>
           <!-- Form inputs and labels -->
           <div>
               <p> Already h*e an account? <a href="#" (click)="onLoginClick()">Log in</a></p>
           </div>
       </form>
   </div>
   <!-- Form end -->
</div>
<!-- Offcanvas end -->

在父组件中监听事件： 在 n*bar.component.html 中监听子组件发射的事件，并调用相应的方法。

<!-- n*bar.component.html -->
<n* class="n*bar">
   <div class="container-fluid">
       <div class="d-flex">

           <a href="" class="n*-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Log in</a>
           <div class="offcanvas">
               <div class="offcanvas-body">
                   <app-login *ngIf="showLogin" (registerClicked)="toggleToRegister()"></app-login>
                   <app-register *ngIf="showRegister" (loginClicked)="toggleToLogin()"></app-register>
               </div>
           </div>

       </div>
   </div>
</n*>