原创投稿
  1. 创想鸟首页
  2. 用户投稿

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

程序猿 • • 用户投稿

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

本文将介绍如何在 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 指令来控制子组件的显示：

注意，这里将 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();  onRegisterClick() {    this.registerClicked.emit();  }}

在 login.component.html 中：

   
              
                                         
                   
 Don't have an account? Register

同样，在 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();  onLoginClick() {    this.loginClicked.emit();  }}

在 register.component.html 中：

   
              
                                         
                   
 Already have an account? Log in

这样，当用户在登录表单中点击“Register”链接时，registerClicked 事件会触发，父组件的 toggleRegister() 方法会被调用，从而隐藏登录表单并显示注册表单。反之亦然。

注意事项

CSS 样式： 确保你的 CSS 样式能够正确处理 Offcanvas 组件的显示和隐藏。数据绑定： 如果你的登录和注册表单需要进行数据绑定，请确保正确使用 Angular 的表单模块。性能优化： 如果你的应用中有大量的组件需要动态显示和隐藏，请考虑使用 OnPush 变更检测策略来提高性能。

总结

通过使用 *ngIf 指令和组件间的事件通信，我们可以轻松地在 Angular 应用中实现动态显示和隐藏组件的功能。这种方法灵活且易于理解，适用于各种场景，包括 Bootstrap Offcanvas 组件中的表单切换。记住，在实际应用中，还需要根据具体需求进行适当的调整和优化。

以上就是Angular 14：动态显示与隐藏子组件的实践指南的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585930.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
Angular 14：动态显示与隐藏子组件的实现方法
上一篇 2025年12月23日 02:06:24
Go模板中实现表单无刷新提交：利用AJAX优化用户体验
下一篇 2025年12月23日 02:06:35

相关推荐

  • VSCode语言特性贡献点配置 用户投稿

    VSCode语言特性贡献点配置

    通过配置package.json中的contributes字段可实现VSCode语言扩展，依次需设置语法高亮（grammars）、语言绑定（languages）、激活事件（activationEvents）及语言服务器功能（如补全、跳转），并定义language-configuration.json…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • 如何用MidJourney导出高质量AI图片？详细教程教你快速保存图像 用户投稿

    如何用MidJourney导出高质量AI图片？详细教程教你快速保存图像

    要获取MidJourney高质量图片，必须通过官网下载经Upscale放大后的版本。首先在Discord中选择满意图片并点击“U”按钮进行放大，随后点击“Web”按钮跳转至MidJourney官网，在浏览器中下载未经压缩的高分辨率原图。直接从Discord保存的图片为平台压缩后的预览图，清晰度较低。…

    程序猿的头像 程序猿
    2026年9月21日
    000

  • 如何设置Linux软件包更新排除 yum exclude和apt-mark hold

    如何设置Linux软件包更新排除 yum exclude和apt-mark hold如何设置Linux软件包更新排除 yum exclude和apt-mark hold如何设置Linux软件包更新排除 yum exclude和apt-mark hold如何设置Linux软件包更新排除 yum exclude和apt-mark hold

    要阻止linux系统中特定软件包更新，可针对不同发行版使用相应方法。对于rhel/centos系系统，可通过在/etc/yum.conf或.repo文件中添加exclude=包名来排除升级；对于debian/ubuntu系系统，则使用sudo apt-mark hold 包名命令锁定版本。这两种方式…

    程序猿的头像 程序猿
    2026年9月21日 • 用户投稿
    400
  • 美图秀秀图片亮度无法调节怎么办 美图秀秀亮度调整与修复方法 用户投稿

    美图秀秀图片亮度无法调节怎么办 美图秀秀亮度调整与修复方法

    亮度调不了可能是未进入“美化”或“编辑”模式，需确认已正确导入图片并找到亮度滑块；2. 软件版本过旧或缓存异常会导致功能失效，应更新美图秀秀或重启程序，电脑版可尝试以管理员身份运行；3. 不同设备可能存在兼容性问题，建议切换手机App或电脑客户端测试，手机用户可清除缓存或重装应用；4. 若功能仍不可…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • 长佩阅读如何自定义封面 用户投稿

    长佩阅读如何自定义封面

    在长佩阅读中，设置自定义封面可以让你的书架更具个人风格。以下是具体操作步骤： 一、确认书籍是否支持自定义封面 并非所有书籍都开放自定义封面功能，你需要先进入书籍详情页查看是否存在“自定义封面”这一选项。若该按钮存在，则说明这本书允许用户更换封面。 二、准备合适的封面图片 选择一张你喜欢的图片作为新封…

    程序猿的头像 程序猿
    2026年9月21日
    000

  • MySQL热点数据缓存策略_MySQL减少磁盘访问提升性能

    MySQL热点数据缓存策略_MySQL减少磁盘访问提升性能MySQL热点数据缓存策略_MySQL减少磁盘访问提升性能MySQL热点数据缓存策略_MySQL减少磁盘访问提升性能MySQL热点数据缓存策略_MySQL减少磁盘访问提升性能

    mysql热点数据缓存的核心在于将频繁访问的数据保留在内存中以减少磁盘i/o，提升查询速度并缓解数据库压力。1. innodb缓冲池是关键机制，需合理配置其大小（通常为服务器内存的70-80%）及实例数以优化性能；2. 应用层缓存如redis/memcached通过前置缓存逻辑减少对mysql的直接…

    程序猿的头像 程序猿
    2026年9月21日 • 用户投稿
    000
  • 如何在Krita导出AI生成的8K艺术图片？保存超高清图像方法 用户投稿

    如何在Krita导出AI生成的8K艺术图片？保存超高清图像方法

    答案是优先选择PNG格式导出8K AI艺术作品，确保画布为8K分辨率，嵌入sRGB色彩配置文件，并优化系统内存与硬盘性能以提升Krita处理效率。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 在Krita中导出AI生成的8K艺术图片，核心…

    程序猿的头像 程序猿
    2026年9月21日
    100
  • Laravel 8 登录后重定向到仪表盘的完整教程 用户投稿

    Laravel 8 登录后重定向到仪表盘的完整教程

    本教程详细介绍了在 Laravel 8 中实现用户登录后重定向到仪表盘的多种方法。我们将探讨如何利用 Laravel 内置的 $redirectTo 属性，以及如何通过重写 LoginController 中的 login 方法来实现自定义重定向逻辑。此外，教程还将重点讲解正确的路由配置和中间件使用…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • safari浏览器怎么把标签页固定在最左边_safari浏览器标签页固定最左设置 用户投稿

    safari浏览器怎么把标签页固定在最左边_safari浏览器标签页固定最左设置

    Safari可通过“固定标签”功能将常用网页保持在标签栏最左并随启动恢复；2. 手动拖动标签至最左可临时调整顺序但不永久保存；3. 结合书签栏添加常用网站并固定标签，可提升访问效率。 如果您希望在使用 Safari 浏览器时将常用网页始终保持在标签栏的最左侧位置，以便快速访问，可以通过以下方法实现标…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • 探探App如何更新应用版本_探探App应用版本更新教程及自动升级设置 用户投稿

    探探App如何更新应用版本_探探App应用版本更新教程及自动升级设置

    打开App Store点击更新标签，找到探探并手动点击更新；2. 开启自动更新需进入设置-App Store，打开自动下载的App更新开关；3. 搜索探探查看是否显示“更新”以确认版本状态。 探探App更新很简单，无论是手动升级还是设置自动更新，都能快速用上最新版本。下面告诉你具体怎么操作。 手动更…

    程序猿的头像 程序猿
    2026年9月21日
    000

  • 如何用Animoto制作AI营销视频？快速生成商业AI视频的教程

    如何用Animoto制作AI营销视频？快速生成商业AI视频的教程如何用Animoto制作AI营销视频？快速生成商业AI视频的教程如何用Animoto制作AI营销视频？快速生成商业AI视频的教程如何用Animoto制作AI营销视频？快速生成商业AI视频的教程

    Animoto通过模板与拖放功能，结合AI生成的文案和配音，帮助用户快速制作品牌统一、节奏合理、带明确CTA的高效营销视频，适用于多平台推广。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ Animoto是一个非常适合快速制作AI营销视频的…

    程序猿的头像 程序猿
    2026年9月21日 • 用户投稿
    000
  • 使用本地HTML文件运行JavaScript脚本失败的原因及解决方案 用户投稿

    使用本地HTML文件运行JavaScript脚本失败的原因及解决方案

    本文旨在帮助开发者理解在没有Web服务器的情况下，直接通过浏览器打开本地HTML文件时，JavaScript脚本可能无法正常运行的原因，并提供相应的解决方案。文章将深入探讨浏览器安全策略、相对路径问题以及如何正确引入和执行JavaScript脚本，确保你的HTML、CSS和JavaScript代码能…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • 番茄免费小说怎么用QQ登录_番茄免费小说QQ登录教程 用户投稿

    番茄免费小说怎么用QQ登录_番茄免费小说QQ登录教程

    首先通过登录界面点击“QQ登录”授权进入，或在账号设置中绑定QQ；若已绑定手机号，则需输入验证码完成验证，最后确认授权即可成功登录。 如果您希望在番茄免费小说中使用QQ账号进行登录，但找不到正确的操作入口或遇到授权问题，可以按照以下方法尝试。这些步骤能帮助您完成账号关联和登录流程。 本文运行环境：小…

    程序猿的头像 程序猿
    2026年9月21日
    200
  • VSCode怎么看效果_VSCode实时预览和调试代码运行效果教程 用户投稿

    VSCode怎么看效果_VSCode实时预览和调试代码运行效果教程

    VSCode通过实时预览扩展和内置调试器实现代码效果查看。使用Live Server可实时预览前端页面，保存即刷新；Markdown文件支持侧边预览。调试功能需配置launch.json，支持Node.js、Python、浏览器端JavaScript等，通过断点、变量监视、调用堆栈等深入分析代码执行…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • PHP一键环境如何配置URL重写_URL Rewrite规则设置 用户投稿

    PHP一键环境如何配置URL重写_URL Rewrite规则设置

    开启Apache的mod_rewrite模块并配置AllowOverride All，再在.htaccess中添加重写规则，即可实现URL重写，使URL更简洁利于SEO。 在使用PHP一键环境（如XAMPP、WAMP、phpStudy等）时，开启URL重写（URL Rewrite）功能可以让网站的U…

    程序猿的头像 程序猿
    2026年9月21日
    100
  • 使用正则表达式检测字符串中的除零操作 用户投稿

    使用正则表达式检测字符串中的除零操作

    本文详细介绍了如何使用正则表达式精确检测字符串中潜在的除零操作。针对表达式中可能存在的变量引用（如<>）、数字、多余空格以及禁止包含引号等复杂情况，文章提供了一个高效的正则表达式模式，并深入解析其构成原理。通过具体的Java代码示例，读者将学习如何将此模式应用于实际编程场景，从而有效识别…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • iPhone14首次使用时应禁用的几项功能 用户投稿

    iPhone14首次使用时应禁用的几项功能

    哪些功能在新机设置时建议关闭？ 1. “定位服务” 启用定位服务后，各类应用可获取您的实时位置，虽然有助于导航或本地推荐，但也可能造成位置信息被滥用。若重视个人隐私，建议进入设置关闭该权限，限制应用对地理位置的访问。 2. “后台应用刷新” 此功能使应用程序在未打开时也能在后台获取最新内容，提升使用…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • AI钉钉1.0联动雅里数科 共探“酒旅+AI”的工作新范式 用户投稿

    AI钉钉1.0联动雅里数科 共探“酒旅+AI”的工作新范式

    在数字化浪潮席卷全球的当下，人工智能正以前所未有的速度重塑各行各业，酒旅产业也正在迎来由ai驱动的深刻变革。10月11日，阿里巴巴钉钉再度走进雅里数科集团，开启一场关于“酒旅行业ai原生工作方式”的深度对话。此次交流标志着双方合作迈入全新阶段，致力于共同探索ai原生工作范式，引领酒旅行业迈向智能化发…

    程序猿的头像 程序猿
    2026年9月21日
    100
  • 解决WordPress wp-settings.php中致命错误的实用指南 用户投稿

    解决WordPress wp-settings.php中致命错误的实用指南

    当WordPress网站遭遇wp-settings.php中Call to undefined function的致命错误时，通常意味着核心文件已损坏。本教程将指导您通过下载全新WordPress副本并替换站点中wp-admin和wp-includes目录来有效解决此问题，确保网站恢复正常运行，并提…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • 如何从被调用类中获取调用者文件的命名空间 用户投稿

    如何从被调用类中获取调用者文件的命名空间

    本文探讨了在PHP中，如何在不通过参数传递的情况下，从一个被调用的工具类中获取到调用该方法的文件的命名空间。通过结合使用`debug_backtrace()`回溯调用栈以定位调用者文件，并利用`token_get_all()`解析文件内容来提取命名空间声明，提供了一种实用的解决方案。文章详细介绍了实…

    程序猿的头像 程序猿
    2026年9月21日
    000

发表回复

登录后才能评论
关注微信