Angular 14 中动态显示与隐藏子组件的实践指南

技术教程
2025-10-18 09:22:14

angular 14 中动态显示与隐藏子组件的实践指南

本文旨在指导 Angular 14 开发者如何在父组件中动态控制子组件的显示与隐藏，尤其是在诸如登录/注册表单切换等场景下。我们将通过一个使用 Bootstrap Offcanvas 组件的示例，演示如何利用 Angular 的数据绑定和条件渲染功能，实现子组件的灵活切换。

在 Angular 应用中，动态显示和隐藏组件是一种常见的需求，尤其是在构建复杂的交互式界面时。例如，在一个侧边栏（Offcanvas）中切换登录和注册表单，或者根据用户的权限显示不同的功能模块。本文将详细介绍如何在 Angular 14 中实现这一功能，并提供一个基于 Bootstrap Offcanvas 的示例。

使用布尔值控制组件的显示

最简单的方法是使用一个布尔类型的变量来控制组件的显示与隐藏。在父组件中定义一个变量，并在子组件的模板中使用 *ngIf 指令。

例如，在 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 = true; // 初始状态显示登录组件

  toggleForm(formType: 'login' | 'register') {
    this.showLogin = formType === 'login';
  }
}

在 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 offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasRightLabel">
            Authentication
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <app-login *ngIf="showLogin"></app-login>
          <app-register *ngIf="!showLogin"></app-register>
        </div>
      </div>
    </div>
  </div>
</n*>

在 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>
  <div class="offcanvas-body">
    <!-- Form -->
    <div>
      <form>
        <!-- Form inputs and labels-->
        <div>
          <p> Don't h*e an account? <a (click)="onRegisterClick()" href="#">Register</a></p>
        </div>
      </form>
    </div>
    <!-- Form end -->
  </div>
  <!-- Offcanvas end -->
</div>

类似地，在 register.component.ts 中添加一个事件发射器，用于通知父组件切换到登录表单：

盘古大模型

华为云推出的一系列高性能人工智能大模型

207 查看详情盘古大模型

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>
  <div class="offcanvas-body">
    <!-- Form -->
    <div>
      <form>
        <!-- Form inputs and labels -->
        <div>
          <p> Already h*e an account? <a (click)="onLoginClick()" href="#">Log in</a></p>
        </div>
      </form>
    </div>
    <!-- Form end -->
  </div>
  <!-- Offcanvas end -->
</div>

最后，在 n*bar.component.html 中，监听子组件的事件，并调用 toggleForm 方法：

<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 offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasRightLabel">
            Authentication
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <app-login *ngIf="showLogin" (registerClicked)="toggleForm('register')"></app-login>
          <app-register *ngIf="!showLogin" (loginClicked)="toggleForm('login')"></app-register>
        </div>
      </div>
    </div>
  </div>
</n*>

使用枚举类型控制组件的显示

如果需要管理更多的组件状态，可以使用枚举类型来代替布尔值。

例如，在 n*bar.component.ts 中：

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

enum FormType {
  Login,
  Register
}

@Component({
  selector: 'app-n*bar',
  templateUrl: './n*bar.component.html',
  styleUrls: ['./n*bar.component.css']
})
export class N*barComponent {
  formType = FormType.Login; // 初始状态显示登录组件
  FormType = FormType; // 暴露给模板使用

  setFormType(formType: FormType) {
    this.formType = formType;
  }
}

在 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 offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasRightLabel">
            Authentication
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <app-login *ngIf="formType === FormType.Login" (registerClicked)="setFormType(FormType.Register)"></app-login>
          <app-register *ngIf="formType === FormType.Register" (loginClicked)="setFormType(FormType.Login)"></app-register>
        </div>
      </div>
    </div>
  </div>
</n*>