Tengo una pregunta, ¿cómo eliminar la clase "show" de li anterior cuando el usuario hace clic en otro menú en angular?
Intenté usar la directiva, pero la clase "show" aún no se puede eliminar del li anterior. Esta es la directiva que he hecho:
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; } } }Y aquí está el selector desplegable de aplicaciones que llamo y uso en el archivo HTML
<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>Puede obtener parentElement.childNodes para obtener la lista de todos los childNode del padre del elemento actualmente seleccionado.
Agregue lo siguiente a su OpenDropdown Hostlistener.
for(let child of this.elementRef.nativeElement.parentElement.childNodes){ this.renderer.removeClass(child, 'show'); }Código definitivo:
@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; } }Probablemente movería la responsabilidad de abrir/cerrar los menús desplegables un nivel más alto. Lo que significa que el componente que representa la barra de navbar conocería el menú actualmente abierto, ya que, según tengo entendido, solo desea tener uno abierto a la vez.
Otra solución sería procesar los argumentos de click HostListener y comparar el target con su elemento nav-item actual. Si es diferente, puede eliminar la clase.