angular - Angular 4:无法单击下拉菜单
问题描述
我希望这是一个有效的问题。如果没有,请建议我如何改进。
我终于能够第一次在 Angular 中创建一个示例项目并上传到 stackblitz 中。实际上我还有其他问题,但在此之前我不确定为什么我无法点击 stackblitz 中的下拉菜单。我可以在本地机器的导航栏中单击“警报”和“配置”。谁能帮我解决这个问题。我对 stackblitz 的工作原理知之甚少。如果下面的 stackblitz 不起作用,请告诉我。这是我第一次开发 Angular,也是我第一次在任何在线编辑器中创建项目。
解决方案
我修复了几个菜单(警报、配置和汉堡菜单):https ://stackblitz.com/edit/github-1b3r3r-axdv2u
步骤 01:切换显示/隐藏菜单
<button class="navbar-toggler" type="button" ... (click)="showMenu=!showMenu;">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="navbarCollapse" [class.collapse]="!showMenu">
...
</div>
步骤02:隐藏菜单,同时使用单击文档中的任意位置。从“@angular/core”导入 {Component, OnInit, HostListener};...
@HostListener('document: click', ['$event'])
onClick(ev) {
if(ev.target.classList.contains("navbar-toggler")) {
this.reset(true, false, false);
}
if(ev.target.classList.contains("navbar-alert")) {
this.reset(false, true, false);
}
if(ev.target.classList.contains("navbar-config")) {
this.reset(false, false, true);
}
}
reset(showMenu, shoeAlert, showConfig) {
this.showMenu = showMenu;
this.showAlert = shoeAlert;
this.showConfig = showConfig;
}
推荐阅读
- dataweave - Dataweave 中的映射
- c++ - 在向量中执行 push_back 时多次调用复制构造函数
- vue.js - Vue-cli Webpack 配置:如何正确设置 webp-loader
- terraform - 如何使用 Terraform 的 local-exec 在 AKS 集群上部署 Helm 图表?
- apache-spark-sql - 具有静态名称值 spark 的 to_json
- python - 在 python pandas 中重新映射和重新组合值
- php - 如何在php中上传多个base64编码的图像
- flutter - 如何将 CachedNetworkImage 转换为 ImageProvider?
- java - 无法获得应付总额
- python - ttk.Entry 未根据文本变量设置默认值