我正在开发一个导航组件,它有几个点击事件,我需要你的帮助:)
在我的HTML中我有
<ul class="nav-right">
<li (click)="toggleDropdown('item1')" (clickOutside)="clickEvent($event)">
<span class="selector">
my Selector
</span>
<ul *ngIf="isActive('item1')">
<li *ngFor="let value of values">
{{city.name}}
</li>
</ul>
</li>
<li (click)="toggleDropdown('other')" (clickOutside)="clickEvent($event)">
<span class="selector">
Other
</span>
<ul *ngIf="isActive('other')">
<li *ngFor="let otherValue of otherValues">
{{otherValue.name}}
</li>
</ul>
</li>
然后在我的组件中,我有几个事件要在组件之间切换
toggleDropdown(menu: any) {
this.activeMenu = this.activeMenu === menu ? 0 : menu;
}
isActive(menu: string): boolean {
return this.activeMenu === menu;
}
最后我使用一个指令来检测nav之外的点击
@Directive({ selector: '[clickOutside]' })
export class ClickOutsideDirective {
@Output() clickOutside = new EventEmitter<MouseEvent>();
constructor(private elementRef: ElementRef) { }
@HostListener('document:click', ['$event'])
onDocumentClick(event: MouseEvent): void {
const targetElement = event.target as HTMLElement;
if (targetElement && !this.elementRef.nativeElement.contains(targetElement)) {
this.clickOutside.emit(event);
}
}
}
我的问题是我不知道如何检查点击的项目是否需要打开,因为我点击了项目本身。我认为那些事件会崩溃,但我不知道如何解决它,如果你给我一个暗示,我将不胜感激。
提前致谢!
因此,我发现了一个非常简单的解决方案,我将在此处发布以供将来使用,以防有人发现它有用。这只是改变某些元素的位置的问题
(clickOutside)="clickEvent($event)"
至
<ul class="nav-right">
所以最后我的html标记是:
<ul class="nav-right" (clickOutside)="clickEvent($event)">
<li (click)="toggleDropdown('item1')">
<span class="selector">
my Selector
</span>
<ul *ngIf="isActive('item1')">
<li *ngFor="let value of values">
{{city.name}}
</li>
</ul>
</li>
<li (click)="toggleDropdown('other')">
<span class="selector">
Other
</span>
<ul *ngIf="isActive('other')">
<li *ngFor="let otherValue of otherValues">
{{otherValue.name}}
</li>
</ul>
</li>
</ul>
因为我想要实现的是当任何人点击外部导航栏时关闭所有下拉菜单