Angular 4：Mega 菜单在单击其中的菜单后未关闭

Posted 2023-05-07

【中文标题】Angular 4：Mega 菜单在单击其中的菜单后未关闭

【英文标题】：Angular 4 : Mega menu is not closed after clicked on a menu inside it

【发布时间】：2019-01-04 06:27:19

【问题描述】：

我在一个 angular 4 项目中工作，在这个项目中，我有一个超级菜单。我想要做的是当我点击超级菜单中的一个菜单时，我想关闭它。

在我的情况下，即使在我单击特定菜单后它也总是打开，但如果我移除其中的鼠标焦点，它就会关闭。

堆栈闪电战：https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-w1qhj4?file=app/app.component.html

谁能帮我解决它。

【问题讨论】：

event.preventDefault(); event.stopPropagation();单击特定菜单后

我是新手，你能不能把这个逻辑应用到我在这里发布的stackblitz文件中@Domi

stackblitz.com/edit/…

点击其中的一个项目后是否会关闭超级菜单@Domi

我没有醒来@Domi

【参考方案1】：

您的应用程序包含错误（查看 Inspector 工具控制台了解详细信息）。尝试在您的 app.component.js 中添加以下函数实现，代码将正常工作。 https://angular-bootstrap-carousel-dynamic2-imxxrv.stackblitz.io

getStoreData() 
    // do something
  
  categoryClick () 
    alert('Inside category');
  
  groupClick() 
    alert('Inside Group');
  

  subGroupClick() 
    alert('Inside Sub Group');
  

【参考方案2】：

这个工程

ngOnInit() 
    this.CartdataService.get_New_Products().subscribe(
      data => 
        this.storeData = data;
          console.log(this.storeData);        
      );
  

  categoryClick(event:Event, data,data2)
    alert(data2)
  

  groupClick(event:Event, data,data2,data3, data4)
    //event.stopPropagation();
    //event.preventDefault();
  

  subGroupClick(event:Event, data,data2,data3, data4, data5, data6)
    //event.stopPropagation();
    //event.preventDefault();