Angular 14：动态显示与隐藏子组件的实现方法_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

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

Angular 14：动态显示与隐藏子组件的实现方法

2025-10-18

浏览次数：次

返回列表

angular 14：动态显示与隐藏子组件的实现方法

本文将介绍在 Angular 14 中，如何根据用户交互动态地显示和隐藏子组件。我们将通过一个登录/注册表单的示例，演示如何利用 Angular 的特性，在 Bootstrap Offcanvas 组件中切换显示不同的子组件，从而实现灵活的用户界面。本文提供了一种基于模板引用变量和条件渲染的简洁方案。

在 Angular 应用中，动态显示和隐藏组件是一种常见的需求，尤其是在构建复杂的交互式界面时。例如，在一个登录/注册页面中，我们可能需要根据用户的选择，在登录表单和注册表单之间进行切换。下面将介绍一种实现这种效果的方法，使用 Angular 的条件渲染和模板引用变量。

实现思路

核心思路是使用一个布尔变量来控制哪个组件应该显示。当用户点击相应的按钮时，我们切换这个变量的值，从而触发 Angular 的变更检测，更新视图。

具体步骤

定义控制变量： 在父组件（例如，包含 Offcanvas 的组件）中，定义一个布尔变量，用于控制登录组件和注册组件的显示状态。

// parent.component.ts
import { Component } from '@angular/core';

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

  toggleForm(showLogin: boolean) {
    this.showLogin = showLogin;
  }
}

使用条件渲染： 在父组件的模板中使用 *ngIf 指令，根据 showLogin 变量的值来决定是否显示登录组件或注册组件。

AI Surge Cloud

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

87 查看详情 AI Surge Cloud

<!-- parent.component.html -->
<div class="offcanvas">
  <div class="offcanvas-body">
    <app-login *ngIf="showLogin" (toggleRegister)="toggleForm(false)"></app-login>
    <app-register *ngIf="!showLogin" (toggleLogin)="toggleForm(true)"></app-register>
  </div>
</div>

子组件触发事件： 在登录组件和注册组件中，当用户点击切换按钮时，触发一个事件，通知父组件切换 showLogin 变量的值。

// 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() toggleRegister = new EventEmitter<boolean>();

  onRegisterClick() {
    this.toggleRegister.emit(true);
  }
}

// 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() toggleLogin = new EventEmitter<boolean>();

  onLoginClick() {
    this.toggleLogin.emit(true);
  }
}

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

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

完整示例

// app.component.ts
import { Component } from '@angular/core';

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

  toggleForm(showLogin: boolean) {
    this.showLogin = showLogin;
  }
}

<!-- app.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>
    </div>
</n*>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel"></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="showLogin" (toggleRegister)="toggleForm(false)"></app-login>
    <app-register *ngIf="!showLogin" (toggleLogin)="toggleForm(true)"></app-register>
  </div>
</div>