垫选择单击外部不起作用,下拉菜单时关闭 [英] Mat select click outside not working, when drop down close
本文介绍了垫选择单击外部不起作用,下拉菜单时关闭的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已使用Mat选择角度组件进行下拉,当我在下拉菜单(页面主体)之外单击时,我需要触发一个事件.
I have drop down made with Mat select angular component, I need to trigger an event when I clicked outside of the drop down (body of the page).
<mat-select #select multiple (change)="onSubmit($event)" [(ngModel)]="emp">
<mat-option *ngFor="let value of filter.default" [value]="value">
{{value}}
</mat-option>
</mat-select>
这是我的ts文件
export class AnotherComponent {
public text: String;
@HostListener('document:click', ['$event'])
clickout(event) {
if(this.eRef.nativeElement.contains(event.target)) {
console.log("clicked inside");
} else {
console.log("clicked outside");
}
}
constructor(private eRef: ElementRef) {
}
}
它无法正常工作,请帮助
Its not working properly, please help
推荐答案
如果您想知道关闭选择面板的时间,请使用openedChange
事件:
If you want to know when the select panel is closed, use the openedChange
event:
<mat-select #select multiple (change)="onSubmit($event)" [(ngModel)]="emp"
(openedChange)="openedChange($event)">
<mat-option *ngFor="let value of filter.default" [value]="value">
{{value}}
</mat-option>
</mat-select>
openedChange(opened: boolean) {
console.log(opened ? 'opened' : 'closed');
}
这篇关于垫选择单击外部不起作用,下拉菜单时关闭的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文