我有一個問題，當用戶單擊 angular 中的另一個選單時，如何從前一個 li 中洗掉類“顯示”？
我已經嘗試使用該指令，但是仍然無法從之前的 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>
uj5u.com熱心網友回復：
您可以通過獲取 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;
}
}
uj5u.com熱心網友回復：
我可能會將打開/關閉下拉選單的責任提高一級。這意味著呈現 的組件navbar將知道當前打開的選單，因為據我所知，您一次只想打開一個。
另一種解決方案是處理 click 的引數HostListener，并將 與target您當前的nav-item元素進行比較。如果不同，您可以洗掉該類。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/387497.html
標籤：javascript 节点.js 有角的 打字稿
下一篇：基于ngif顯示文本或表格