如何从以前的 li 中删除类“show”？

Posted 2023-02-22

【中文标题】如何从以前的 li 中删除类“show”？

【英文标题】：How to remove class "show" from previous li in angular?

【发布时间】：2022-01-21 22:42:50

【问题描述】：

我有一个问题，当用户点击另一个角度菜单时，如何从上一个 li 中删除类“show”？

我已经尝试使用该指令，但仍然无法从之前的 li 中删除“show”类。这是我制定的指令：

import  Directive, ElementRef, HostListener, Renderer2  from "@angular/core";

@Directive(
  selector: '[appDropdown]'
)

export class DropdownDirective 
  manageDropdown : boolean = false;

  constructor(private elementRef: ElementRef, private renderer: Renderer2)   

  @HostListener('click') openDropdown() 
    if(!this.manageDropdown) 
      this.renderer.addClass(this.elementRef.nativeElement,'show');
      this.manageDropdown = !this.manageDropdown;
     else 
      this.renderer.removeClass(this.elementRef.nativeElement, 'show');
      this.manageDropdown = !this.manageDropdown;
    
  

这是我在 html 文件中调用和使用的 appDropdown 选择器

<ul class="navbar-nav">
    <li class="nav-item dropdown" appDropdown></li>
    <li class="nav-item dropdown" appDropdown></li>
    <li class="nav-item dropdown" appDropdown></li>
    <li class="nav-item dropdown" appDropdown></li>
</ul>

【问题讨论】：

您需要将 appDropdown 选择器移动到 中，因为您可以删除子 显示类。

@Dipten 我搬家后，我应该在指令中做什么？

【参考方案1】：

可以通过parentElement.childNodes获取当前点击元素的父级的所有childNode的列表。

将以下内容添加到您的 openDropdown Hostlistener。

for(let child of this.elementRef.nativeElement.parentElement.childNodes)
      this.renderer.removeClass(child, 'show');
 

最终代码：

@HostListener('click') openDropdown() 
    for(let child of this.elementRef.nativeElement.parentElement.childNodes)
      this.renderer.removeClass(child, 'show');
    
    
    if(!this.manageDropdown) 
      this.renderer.addClass(this.elementRef.nativeElement,'show');
      this.manageDropdown = !this.manageDropdown;
     else 
      this.renderer.removeClass(this.elementRef.nativeElement, 'show');
      this.manageDropdown = !this.manageDropdown;
    
  

【讨论】：

woaahhhhh... 完全是它的工作，谢谢

【参考方案2】：

我可能会将打开/关闭下拉菜单的责任提高一级。这意味着呈现navbar 的组件会知道当前打开的菜单，因为据我了解，您一次只想打开一个。

另一种解决方案是处理单击HostListener 的参数，并将target 与您当前的nav-item 元素进行比较。如果不同，您可以删除该类。

【讨论】：

如果我将 appDropdown 选择器移到它上方 1 级，在这种情况下，我将它移到 标记。我应该在指令中更改什么？