Angular 7：单击外部时关闭菜单

Posted 2023-02-22

【中文标题】Angular 7：单击外部时关闭菜单

【英文标题】：Angular 7 : close menu when click outside

【发布时间】：2019-08-22 10:42:06

【问题描述】：

我想知道每当在父div#menu内触发点击时，其中存在不相关的html标签。

nativeElement.parent 对我不起作用。

HTML 代码：

<button #toggleButton (click)="toggleMenu()"> Toggle Menu</button>

 <div class="menu" *ngIf="isMenuOpen" #menu>
    <div>
      I'm the menu. Click outside to close me
    </div>
    </div>

角脚本：

this.renderer.listen('window', 'click',(e:Event)=>

        if(e.target !== this.toggleButton.nativeElement && e.target!==this.menu.nativeElement)
            this.isMenuOpen=false;
        
    );

这不起作用。

【参考方案1】：

将主机添加到组件元标记。

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  host: 
    "(window:click)": "onClick()"
  
)

stopPropagation()

Event 接口的 stopPropagation() 方法可以防止进一步 在捕获和冒泡阶段传播当前事件。

toggleMenu($event)     
    $event.stopPropagation();
    this.isMenuOpen = !this.isMenuOpen;
  

  onClick() 
    this.isMenuOpen = false;
  

例如：https://stackblitz.com/edit/angular-oenkbw

【讨论】：

不知道主机 (window:click) 监听器，这很好。干得好;)

如果你在里面点击菜单会关闭

【参考方案2】：

您可以通过侦听文档单击事件来重置菜单状态，在这种情况下，菜单中的任何单击事件都需要运行事件stopPropagationmethod 以阻止文档单击方法，最后菜单组件主体中的任何单击都由处理你 并且菜单组件resetToggle 之外的任何点击事件都会运行。

stopPropagation 阻止文档点击处理程序运行

  menuItemClickHandler(e , index ) 
   e.stopPropagation();
   // something magical  ?‍♂️✨
    ...
  

  @HostListener("document:click") resetToggle() 
    this.isMenuOpen=false;
  

菜单组件

export class MenusComponent 

  menuslist = [1, 2, 3, 4, 5, 6, 7, 8];

  @HostBinding('class.active') isMenuOpen: boolean = false;

  constructor()  

  menuItemClickHandler(e, index) 
    e.stopPropagation();
    // something magical  ?‍♂️✨
    console.log(index);
    this.toggle(e); // toggle menus after you click ?
  
  // component click
  @HostListener('click', ['$event']) click(e) 
    e.stopPropagation();

  
  @HostListener("document:click") resetToggle() 
    this.isMenuOpen = false;
  

  toggle(e) 
    e.stopPropagation();
    console.log('toggle')
    this.isMenuOpen = !this.isMenuOpen;
  

菜单组件模板

<ul ngClass="slide : isMenuOpen">
  <li *ngFor="let item of menuslist;let index=index" (click)="menuItemClickHandler($event,index)">
    item
  </li>
  </ul>

菜单样式将根据菜单的打开值切换菜单以打开或关闭滑动

:host 
  display: block;
  height: 50vh;
  width: 200px;
  background: #ccc;
  margin-left: -300px;
  transition: all 0.25s ease-in-out;

:host.active
  margin-left: 0

stackblitz demo ??

【讨论】：

我尝试进行更改。但它不起作用。只有当我点击它之外时，菜单才必须关闭。这是参考链接：stackblitz.com/edit/…

删除这行this.toggle(e); // toggle menus after you click ?

检查这个stackblitz.com/edit/angular-toggle-menus-j8s1eh@Lavanya

当我为菜单添加 event.stopPropogation() 方法时，它按预期工作。 HTML : 切换菜单 我是菜单。点击外面关闭我 Angular : @Directive( selector: "[click-stop-stopPropagation]" ) @HostListener("click",["$event"])公共 onClick(event:any) :void event.stopPropagation();

@Lavanya 切换已经调用 e.stopPropagation(); ?‍♂️ <button (click)="m.toggle($event)">|||</button> stackblitz.com/edit/angular-toggle-menus-j8s1eh