Angular 14：动态显示与隐藏子组件实现指南-html教程-PHP中文网

Angular 14：动态显示与隐藏子组件实现指南

DDD

发布： 2025-10-18 12:13:12

原创

339人浏览过

angular 14：动态显示与隐藏子组件实现指南

本文旨在提供一种在 Angular 14 中，根据用户交互动态显示和隐藏子组件的实用方法。通过使用 Angular 的属性绑定和事件绑定，结合组件间的通信，可以轻松实现组件的切换和控制。本文将提供一个基于 Bootstrap Offcanvas 组件的示例，展示如何在登录和注册表单之间进行切换，并提供可复用的代码和注意事项。

在 Angular 应用中，经常需要根据用户的操作来动态地显示或隐藏不同的组件。例如，在一个登录/注册页面中，用户点击“注册”按钮时，需要隐藏登录表单并显示注册表单。本文将介绍一种实现这种动态切换的常用方法，并提供一个基于 Bootstrap Offcanvas 组件的示例。

方法概述

实现组件动态显示和隐藏的核心在于控制组件的可见性。在 Angular 中，可以使用以下方法：

属性绑定： 使用 *ngIf 指令，根据一个布尔变量的值来决定是否渲染组件。
事件绑定： 监听用户的操作（例如按钮点击），并更新控制组件可见性的布尔变量。
组件间通信： 如果需要在不同的组件之间共享状态（例如，一个组件点击按钮需要影响另一个组件的可见性），可以使用 @Input() 和 @Output() 装饰器，或者使用 Angular 的服务（例如，Subject 或 BehaviorSubject）来实现组件间的通信。

示例：登录/注册表单切换

下面是一个基于 Bootstrap Offcanvas 组件的登录/注册表单切换的示例。

1. 创建组件

首先，创建三个组件：navbar.component、login.component 和 register.component。

2. 修改 navbar.component.html

在 navbar.component.html 中，添加一个按钮用于触发 Offcanvas 组件的显示，并使用 *ngIf 指令来控制 login.component 和 register.component 的显示。

<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"
        (click)="showLogin()"
        >Log in</a
      >
    </div>
  </div>
</nav>

<div
  class="offcanvas offcanvas-end"
  tabindex="-1"
  id="offcanvasRight"
  aria-labelledby="offcanvasRightLabel"
>
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">
      {{ showLoginComponent ? "Log In" : "Register" }}
    </h5>
    <button
      type="button"
      class="btn-close text-reset"
      data-bs-dismiss="offcanvas"
      aria-label="Close"
    ></button>
  </div>
  <div class="offcanvas-body">
    <app-login *ngIf="showLoginComponent" (registerClicked)="showRegister()"></app-login>
    <app-register *ngIf="!showLoginComponent" (loginClicked)="showLogin()"></app-register>
  </div>
</div>

登录后复制

3. 修改 navbar.component.ts

在 navbar.component.ts 中，定义一个布尔变量 showLoginComponent 来控制 login.component 和 register.component 的显示。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css'],
})
export class NavbarComponent {
  showLoginComponent: boolean = true;

  showLogin() {
    this.showLoginComponent = true;
  }

  showRegister() {
    this.showLoginComponent = false;
  }
}

登录后复制

4. 修改 login.component.html

在 login.component.html 中，添加一个按钮用于切换到注册表单。

<!-- Form -->
<div>
  <form>
    <!-- Form inputs and labels-->
    <div>
      <p>
        Don't have an account?
        <a href="#" (click)="onRegisterClicked()">Register</a>
      </p>
    </div>
  </form>
</div>
<!-- Form end -->

登录后复制

5. 修改 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>();

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

登录后复制

6. 修改 register.component.html

在 register.component.html 中，添加一个按钮用于切换到登录表单。

<!-- Form -->
<div>
  <form>
    <!-- Form inputs and labels -->
    <div>
      <p>
        Already have an account?
        <a href="#" (click)="onLoginClicked()">Log in</a>
      </p>
    </div>
  </form>
</div>
<!-- Form end -->

登录后复制

7. 修改 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>();

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

登录后复制

代码解释：

*ngIf="showLoginComponent"：根据 showLoginComponent 的值，动态显示或隐藏 login.component 和 register.component。
(click)="showLogin()" 和 (click)="showRegister()"：监听按钮点击事件，并更新 showLoginComponent 的值。
@Output() registerClicked = new EventEmitter<void>() 和 @Output() loginClicked = new EventEmitter<void>(): 在子组件中定义输出属性，当点击注册或者登录按钮时，触发父组件中的相应事件。