angular script angularjs控制按钮显示隐藏

本文将介绍如何在 Angular 14 中实现动态显示和隐藏子组件，以创建一个在登录和导出单之间切换的交互式界面。通过控制组件的显示与隐藏，我们可以在 Bootstrap Offcanvas 中组件中实现登录和静态单的无缝切换，从而提升用户体验。将提供清晰的代码示例和详细的步骤，帮助你理解并实现这一功能。实现组件的动态显示与隐藏

在 Angular 中实现组件的动态显示与隐藏则，通常可以使用以下方法：*使用 `ngIf 指令：***ngIf 指令根据表述的值来决定是否渲染组件。如果表达式为 true，则组件会被渲染；如果为 false`，组件不会被渲染。使用 CSS 可以类：通过添加或删除 CSS 类，可以控制组件的显示属性，从而实现显示或隐藏组件的效果。

在本例中，我们将使用 *ngIf 指令来控制登录和注册组件的显示与。具体实现步骤

创建隐藏组件：首先，确保您已经创建了 LoginComponent 和 RegisterComponent。

在组件父中定义高效变量：在组件父（如 NavbarComponent）中，定义两个布尔类型的变量，用于控制登录和注册组件的显示状态。 表单大师AI

一款自然的基于语言处理技术的智能在线表单创建工具，可以帮助用户快速、本地生成表单专业表单。

74 查看详情 // navbar.component.tsimport { Component } from '@angular/core'；@Component({ 选择器： 'app-navbar'， templateUrl： './navbar.component.html'， styleUrls： ['./navbar.component.css']})export class NavbarComponent { showLogin： boolean = true； showRegister： boolean = false；toggleToRegister() { this.showLogin = false； this.showRegister = true； }toggleToLogin() { this.showLogin = true； this.showRegister = false； }}登录后复制

*在父组件的模板中使用`ngIf指令：**在父组件的模板（例如navbar.component.html）中使用*ngIf指令来控制login和register`组件的隐藏显示与。

lt；!-- navbar.component.html --gt；lt；nav class=quot；navbarquot；gt； lt；div class=quot；container-fluidquot；gt； lt；div class=quot；d-flexquot；gt； lt；a href=quot；quot； class=quot；nav-linkquot； data-bs-toggle=quot；offcanvasquot； data-bs-target=quot；#offcanvasRightquot； aria-controls=quot；offcanvasRightquot；gt；登录lt；/agt； lt；div class=quot；offcanvasquot；gt； lt；div class=quot；offcanvas-bodyquot；gt； lt；app-login *ngIf=quot；showLoginquot；gt；lt；/app-logingt； lt；app-register *ngIf=quot；showRegisterquot；gt；lt；/app-registergt； lt；/divgt； lt；/divgt； lt；/divgt； lt；/divgt；lt；/navgt；登录后复制

在子组件中触发事件：在login.component.html和register.component.html中，为切换按钮添加点击事件，并分别调用父组件中定义的方法来切换显示状态。需要使用@Output装饰器在子组件中定义事件发送器，并在父组件中监听这些事件。

// login.component.tsimport { Component， Output， EventEmitter } from '@angular/core'；@Component({ selector： 'app-login'， templateUrl： './login.component.html'， styleUrls： ['./login.component.css']})export class LoginComponent { @Output() registerClicked = new EventEmitterlt；voidgt；()； onRegisterClick() { this.registerClicked.emit()； }}登录后复制lt；!-- login.component.html --gt；lt；!-- Offcanvas --gt；lt；divgt； lt；!-- Form --gt； lt；divgt； lt；formgt； lt；!-- Form 输入和标签--gt； lt；divgt； lt；pgt； 没有账户？ lt；a href=quot；#quot； (click)=quot；onRegisterClick()quot；gt；注册lt；/agt；lt；/pgt； lt；/divgt； lt；/formgt； lt；/divgt； lt；!-- Form end --gt；lt；/divgt；lt；!-- Offcanvas end --gt；登录后复制// register.component.tsimport { Component， Output， EventEmitter } from '@angular/core'；@Component({ selector： 'app-register'， templateUrl： './register.component.html'， styleUrls： ['./register.component.css']})export class RegisterComponent { @Output() loginClicked = new EventEmitterlt；voidgt；()； onLoginClick() { this.loginClicked.emit()； }}登录后复制lt；!-- register.component.html --gt；lt；!-- Offcanvas --gt；lt；divgt； lt；!-- 表单 --gt； lt；divgt； lt；formgt； lt；!-- 表单输入和标签 --gt； lt；divgt； lt；pgt； 已经有账户了吗？ lt；a href=quot；#quot； (click)=quot；on

LoginClick()quot；gt；登录lt；/agt；lt；/pgt； lt；/divgt； lt；/formgt；lt；/divgt；lt；!-- 表单结束 --gt；lt；/divgt；lt；!-- Offcanvas 结束 --gt；登录后复制

在父组件中监听事件：在 navbar.component.html 中监听子组件发送的事件，并关联相应的方法。lt；!-- navbar.component.html --gt；lt；nav class=quot；navbarquot；gt； lt；div class=quot；container-fluidquot；gt； lt；div class=quot；d-flexquot；gt； lt；a href=quot；quot； class=quot；nav-linkquot； data-bs-toggle=quot；offcanvasquot； data-bs-target=quot；#offcanvasRightquot； aria-controls=quot；offcanvasRightquot；gt；Log inlt；/agt； lt；div class=quot；offcanvas"；gt； lt；div class=quot；offcanvas-body"；gt； lt；app-login *ngIf=quot；showLoginquot； (registerClicked)=quot；toggleToRegister()quot；gt；lt；/app-logingt； lt；app-register *ngIf=quot；showRegisterquot； (loginClicked)=quot；toggleToLogin()quot；gt；lt；/app-registergt；lt；/divgt；lt；/divgt；lt；/divgt；lt；/divgt；lt；/navgt；登录后复制事项注意确保在 LoginComponent 和 RegisterComponent 中正确引入 Output 和 EventEmitter。在父组件中正确监听子组件的事件，并调用相应的方法来更新 showLogin 和 showRegister变量。根据实际需求调整 CSS 样式，以确保组件的显示效果符合预期。总结

通过使用 *ngIf 通过指令和事件绑定，我们可以轻松地实现 Angular 组件的动态显示与隐藏，从而创建更加灵活和交互性强的用户界面。这种方法不仅适用于登录/更改单的切换，还可以了解各种需要动态控制组件显示状态的场景。这种方法使得组件的切换体验更加流畅，用户更好。

以上就是Angular 14：动态显示与隐藏子组件实现登录/布局单切换的详细内容，更多请关注乐哥常识网相关文章！如何使用CSS实现自定义单选按钮选中时的颜色变化解决旋转图片溢出容器的问题：CSS溢出：隐藏的妙用使用jQuery实现产品图片切换：解决CSS激活状态回收导致的​​问题