当我使用事件监听器单击元素时,我应该显示我的弹出窗口,在我介绍onClickOutside()之前,它的工作原理还不错。使用ng-click-outside
export class Component {
private isPopupDisplayed: boolean = false;
onClick() {
console.log('Clicked');
this.isPopupDisplayed = true;
}
onClickedOutside(event) {
this.isPopupDisplayed = false;
}
}
.popup{
position: absolute;
z-index: 3;
width: 200px;
height: 94px;
background-color: $secondary-color;
left: 0%;
bottom: 0%;
padding: 15px 0px;
margin: 12px;
border: 1px solid $modal-border-color;
border-radius: 4px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
li:hover {
background-color: $accent-color;
}
li {
padding-top: 5px;
height: 32px;
}
}
<div *ngIf="isPopupDisplayed" >
<ul class="popup" (clickOutside)="onClickedOutside($event)">
<li><a>My Details</a></li>
<li><a>Sign out</a></li>
</ul>
</div>
<div class="presenter-menu_avatar" (click)="onClick()" >
<img [src]="avatarUrl">
</div>
当我尝试引入onClickOutside()方法时,我可以看到这两种方法是同时触发的,因为我的弹出窗口仍然不存在,并且自动触发甚至没有显示它。
我的目的是仅在onClick()时显示弹出窗口,而在其外部单击时将其隐藏。
答案 0 :(得分:1)
在点击功能中添加stopPropagation事件
onClick(event) {
event.stopPropagation()
console.log('Clicked');
this.isPopupDisplayed = true;
}
<div class="presenter-menu_avatar" (click)="onClick($event)" >
<img [src]="avatarUrl">
</div>