本文将介绍如何在 Angular 14 中实现动态显示和隐藏子组件，特别是针对 Bootstrap Offcanvas 组件中的登录和注册表单切换场景。我们将通过 StackBlitz 示例，演示如何使用 Angular 的特性来实现组件的动态切换，并提供关键代码片段和注意事项，帮助你掌握这种常用的前端开发技巧。
在 Angular 应用中，动态显示和隐藏组件是一种常见的需求，例如在 Bootstrap Offcanvas 组件中切换登录和注册表单。以下介绍一种使用 Angular 特性实现此功能的方法。
使用 *ngIf 指令进行条件渲染
最常用的方法是使用 Angular 的 *ngIf 指令。*ngIf 指令允许你根据一个条件表达式来决定是否渲染一个组件。
首先，在你的父组件（例如 navbar.component.ts）中定义两个布尔变量，分别表示登录表单和注册表单的可见性：
import { Component } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
showLogin: boolean = true;
showRegister: boolean = false;
toggleLogin() {
this.showLogin = true;
this.showRegister = false;
}
toggleRegister() {
this.showLogin = false;
this.showRegister = true;
}
}然后，在你的父组件的 HTML 模板（navbar.component.html）中使用 *ngIf 指令来控制子组件的显示：
<nav class="navbar">
<div class="container-fluid">
<div class="d-flex">
<a href="" class="nav-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)="toggleRegister()"></app-login>
<app-register *ngIf="showRegister" (loginClicked)="toggleLogin()"></app-register>
</div>
</div>
</div>
</div>
</nav>注意，这里将 app-login 和 app-register 组件都包裹在一个 div 中，并添加了 offcanvas 类。*ngIf 指令会根据 showLogin 和 showRegister 的值来决定是否渲染对应的组件。
子组件与父组件通信
为了在登录和注册组件中切换显示状态，我们需要让子组件能够通知父组件。这可以通过使用 Angular 的 @Output 装饰器和 EventEmitter 来实现。
在 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 class="offcanvas">
<div class="offcanvas-body">
<!-- Form -->
<div>
<form>
<!-- Form inputs and labels-->
<div>
<p> Don't have an account? <a (click)="onRegisterClick()" href="#">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 class="offcanvas">
<div class="offcanvas-body">
<!-- Form -->
<div>
<form>
<!-- Form inputs and labels -->
<div>
<p> Already have an account? <a (click)="onLoginClick()" href="#">Log in</a></p>
</div>
</form>
</div>
<!-- Form end -->
</div>
<!-- Offcanvas end -->这样，当用户在登录表单中点击“Register”链接时，registerClicked 事件会触发，父组件的 toggleRegister() 方法会被调用，从而隐藏登录表单并显示注册表单。反之亦然。
注意事项
- CSS 样式： 确保你的 CSS 样式能够正确处理 Offcanvas 组件的显示和隐藏。
- 数据绑定： 如果你的登录和注册表单需要进行数据绑定，请确保正确使用 Angular 的表单模块。
- 性能优化： 如果你的应用中有大量的组件需要动态显示和隐藏，请考虑使用 OnPush 变更检测策略来提高性能。
总结
通过使用 *ngIf 指令和组件间的事件通信，我们可以轻松地在 Angular 应用中实现动态显示和隐藏组件的功能。这种方法灵活且易于理解，适用于各种场景，包括 Bootstrap Offcanvas 组件中的表单切换。记住，在实际应用中，还需要根据具体需求进行适当的调整和优化。
