垫子选择单击外部不起作用,下拉关闭时 [英] Mat select click outside not working, when drop down close
本文介绍了垫子选择单击外部不起作用,下拉关闭时的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有使用 Mat select angular 组件制作的下拉菜单,当我在下拉菜单(页面主体)外部单击时需要触发一个事件.
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屋!
查看全文