首页 > 解决方案 > Angular 4:无法单击下拉菜单

问题描述

我希望这是一个有效的问题。如果没有,请建议我如何改进。

我终于能够第一次在 Angular 中创建一个示例项目并上传到 stackblitz 中。实际上我还有其他问题,但在此之前我不确定为什么我无法点击 stackblitz 中的下拉菜单。我可以在本地机器的导航栏中单击“警报”和“配置”。谁能帮我解决这个问题。我对 stackblitz 的工作原理知之甚少。如果下面的 stackblitz 不起作用,请告诉我。这是我第一次开发 Angular,也是我第一次在任何在线编辑器中创建项目。

https://stackblitz.com/edit/github-1b3r3r-3mhncg

标签: 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;
    }

推荐阅读