javascript - 如果在垫步进器之前打开任何文档,如何禁用/停止 HostListener?
问题描述
在我的应用程序中,我使用的是 Mat stepper。我正在聆听关键字“输入”并保存表单并重定向到下一步。我的问题是在步进器 4 上说我有两个按钮添加和编辑假设我单击编辑它会在步进器 4 之前打开文档的短窗口以编辑表单并在单击输入时保存数据并关闭文档查看器同时步进器也听输入关键字并进入下一步。如果打开任何文档,我想禁用 HostListener。
@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if (event.key == 'Enter') {
if (this.selectedStepper == '0') {
if (this.firstForm.valid) {
console.log('Stepper 1', this.fifthForm.valid)
this.onFirstSubmit()
this.stepper.next()
} else {
this.toastrService.danger('Incomplete Form', 'Message')
}
} else if (this.selectedStepper == '1') {
if (this.secondForm.valid) {
console.log('Stepper 2', this.secondForm.valid)
this.onSecondSubmit(this.country_birth)
this.stepper.next()
} else {
this.toastrService.danger('Incomplete Form', 'Message')
}
} else if (this.selectedStepper == '2') {
if (this.thirdForm.valid) {
console.log('Stepper 3', this.thirdForm.valid)
this.onThirdSubmit()
this.stepper.next()
} else {
this.toastrService.danger('Incomplete Form', 'Message')
}
} else if (this.selectedStepper == '3') {
if (this.fourthForm.valid) {
console.log('Stepper 4', this.fourthForm.valid)
this.onFourthSubmit()
// this.stepper.next();
} else {
this.toastrService.danger('Incomplete Form', 'Message')
}
} else if (this.selectedStepper == '4') {
if (this.fifthForm.valid) {
console.log('Stepper 5', this.fifthForm.valid)
this.onFifthSubmit()
this.stepper.next()
} else {
this.toastrService.danger('Incomplete Form', 'Message')
}
} else if (this.selectedStepper == '5') {
if (this.profileCompleteness == true) {
console.log('Stepper 6')
this.quickApply()
} else {
this.toastrService.danger('Incomplete Form', 'Message')
}
}
}
}
stepperCalled(event) {
this.selectedStepper = event.selectedIndex
}
<div class="Rtable-cell--heading">Add/Edit</div>
<div class="Rtable-cell--content date-content" *ngIf="showEdit == false && showOpenEdit == false">
<button nbButton *ngIf="addDegree" (click)="open(1)">Add</button>
<button nbButton *ngIf="editDegree" (click)="open(1)">Edit</button>
</div>
onFourthSubmit(){
console.log(this.fourthForm.valid);
var error = this.findInvalidControls();
// console.log(JSON.stringify(error))
if(this.fourthForm.valid){
this.stepper.next();
}
}
open(EducationalDialogNo) {
// SSC/CBSC dialogs validation commented as ssc not required
if (EducationalDialogNo == 1) {
console.log("EducationalDialogNo == 1");
this.dialogService.open(FirstDialogComponent).onClose.subscribe((data: any) => {
if (data !== undefined) {
this.cbse.university = data.sscUniversity;
this.cbse.school_name = data.sscCollege;
this.cbse.result_date = data.sscResultDate;
this.cbse.school_marks = data.sscMarks;
}
// this.stepper.stop();
err => console.error(err)
});
} else if (EducationalDialogNo == 2) {
//Code yrr
}
}
解决方案
如何停用HostListener
?抱歉,我不知道,甚至不确定这是否可行,因为在撰写本文时,这是一个功能请求
但解决方法可能是:
- 创建一个变量(如果这些方法不在同一个组件中,请在服务中创建它)。
- 控制,当 keydown 被触发时,如果你打开了一个对话框
- 如果是,什么也不做
isDialogOpen = false
@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if(this.isDialogOpen) return
// Your code
}
open(EducationalDialogNo) {
// SSC/CBSC dialogs validation commented as ssc not required
if (EducationalDialogNo == 1) {
this.isDialogOpen = true
console.log('EducationalDialogNo == 1')
this.dialogService.open(FirstDialogComponent).onClose.subscribe((data: any) => {
this.isDialogOpen = false
if (data !== undefined) {
this.cbse.university = data.sscUniversity
this.cbse.school_name = data.sscCollege
this.cbse.result_date = data.sscResultDate
this.cbse.school_marks = data.sscMarks
}
// this.stepper.stop();
;(err) => console.error(err)
})
} else if (EducationalDialogNo == 2) {
//Code yrr
}
}
推荐阅读
- google-apps-script - 在几个特定标签上运行 Google 表格脚本
- python - 有没有一种更简单、更简单的方法,使用 subprocess.Popen() 将 Powershell 哈希表作为字符串作为数据帧输入 Python?
- mysql - 如何配置 Debezium 以使用特定列作为 Kafka 消息键?
- html - Talwind Flexbox 网格布局
- javascript - 使用 Blazor 重写 JavaScript 单击和显示 UI
- go - 使用 miniredis 模拟 redis 服务器失败
- google-apps-script - 如何使用谷歌脚本中的按钮在 Excel 中导出?
- r - 根据列名从嵌套列表中提取元素
- java - Java JTextfield不尊重给定的列宽
- java - 如何在 Java/Android 中的格式化字符串中显示本地化日期单位?