在 Angular 中删除事件监听器后重新附加它

Question

我有一个带有两个按钮的模态：一个位于标题中，一个位于模态主体中。目前，当模式打开时，焦点会自动转到模式主体中的按钮，但我希望它集中在标题按钮上。

为了解决这个问题，我编写了一个函数，将事件侦听器添加到模式按钮，并在该函数中包含了关注标题按钮的代码。

我的代码如下：

triggerBtn(){
    const modalBtnDiv = document.querySelector('.modal-div');
    const headerBtn = document.querySelector('.header-btn');
    const myFocusEvent =(e) =>{
      headerBtn.focus(); 
      modalBtnDiv.removeEventListener('focus', myFocusEvent);
    };
    modalBtnDiv.addEventListener('focus', myFocusEvent);
}

但是，问题是 focusEvent() 只触发一次。当再次调用triggerBtn()时，focusEvent()不起作用，因为在删除侦听器后，它不会被重新附加。如果我不删除事件侦听器，焦点将保留在标题 btn 上，并且不会转到下一个按钮。

有没有办法解决这个问题并确保焦点按预期工作？

Answer 1

据我了解您的问题，您希望自动聚焦在标题中的按钮上。这可以通过将

autofocus

添加到 HTML 模板中的按钮来实现，如下所示：

<button class="my-button" (click)="doSomething($event)"

然后你就可以去掉这个函数了

triggerBtn()

如果您确实需要通过

triggerBtn()

功能进行设置，您可以通过稍微调整您的功能来达到相同的结果：

// assuming Angular 17+

@Component({
  template: '<button #headerBtn></button> <button #modalDiv></button>' // for simplicity
})
export class TestComponent {
  $headerBtn = viewChild<ElementRef>('headerBtn'); // Signal<ElementRef|undefined>
  $modalBtn = viewChild<ElementRef>('modalDiv'); // Signal<ElementRef|undefined>

  triggerBtn() {
    const headerBtn = this.$headerBtn();
    const modalBtn = this.$modalBtn();
    if(modalBtn) {
      modalBtn.nativeElement.blur(); // remove focus from modal button
    }
    if(headerBtn) {
      headerBtn.nativeElement.focus(); // focus the header button
    }
    
  }
}

希望这有帮助！