如果在matstepper之前打開任何檔案，如何禁用/停止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
  }
 }

uj5u.com熱心網友回復：

如何停用HostListener？抱歉，我不知道，甚至不確定這是否可行，因為在撰寫本文時，這是一個功能請求

但解決方法可能是：

1. 創建變數（如果這些方法不在同一個組件中，請在服務中創建它）。
2. 控制，當 keydown 被觸發時，如果你有一個對話框打開
3. 如果是，什么都不做

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
  }
}

標籤：javascript 有角的 打字稿

上一篇：TS2322：型別'產品[]|null'不可分配給型別'Product[]'

下一篇：使用路由時如何從app.component.ts呼叫API