Question

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

我终于能够第一次在Angular中创建一个示例项目并上传到stackblitz。其实我还有其他问题，但在此之前我不知道为什么我无法点击stackblitz中的下拉菜单。我可以点击＆＃34;提醒＆＃34;和＆＃34;配置＆＃34;在我本地计算机的导航栏中。任何人都可以帮我这个。我对stackblitz的工作原理知之甚少。如果下面的stackblitz不起作用，请告诉我。这是我第一次开发Angular，第一次在任何在线编辑器中创建项目。

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

Answer 1

我修复了几个菜单（警报，配置和汉堡菜单）：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;
    }

Angular 4：无法点击下拉菜单

1 个答案: