Angular组件上的模糊事件未触发

Question

我正在尝试使反应式表单正确处理模糊事件，但它似乎对模糊没有正确的反应。

import { Component, HostListener, HostBinding } from '@angular/core';

@Component({
  selector: 'app-combo-box-basic',
  templateUrl: './combo-box-basic.html'
})
export class ComboBoxBasic {

  @HostListener('blur', ['$event.target']) onBlur(target) {
    console.log(`onBlur(): ${new Date()} - ${JSON.stringify(target)}`);
  }
}

<div class="btn-group mr-3">
  <input (blur)="onBlur($event.target)" type="text" class="btn btn-outline-success">
  <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
    <button (blur)="onBlur($event.target)" class="btn btn-outline-primary" ngbDropdownToggle></button>
    <div class="dropdown-menu" ngbDropdownMenu>
      <button class="dropdown-item">One</button>
      <button class="dropdown-item">Two</button>
      <button class="dropdown-item">Four!</button>
    </div>
  </div>
</div>

- RonnBlack

Answer 1

经过大量的搜索和实验，我发现需要以下一些内容才能使其正常工作。 这里可以找到一个完全功能的演示

1. 外部元素必须具有：tabindex="0"，以便可以聚焦。这可以通过以下方式实现：@HostBinding('attr.tabindex') tabindex = '0';

2. 为失去焦点事件添加 HostListener 将捕获外部组件：@HostListener('blur', ['$event.target']) onBlur(target) { ... }

3. 仍然需要捕获内部组件的失焦事件，以便单击进入和退出仍然可以触发。(blur)="onBlur($event.target)"

import { Component, HostListener, HostBinding } from '@angular/core';

@Component({
  selector: 'app-combo-box-basic',
  templateUrl: './combo-box-basic.html'
})
export class ComboBoxBasic {

  // Make sure container can receive focus or else blur events won't be seen.
  @HostBinding('attr.tabindex') tabindex = '0';
  @HostListener('blur', ['$event.target']) onBlur(target) {
    console.log(`onBlur(): ${new Date()} - ${JSON.stringify(target)}`);
  }
}

<div class="btn-group mr-3">
  <input (blur)="onBlur($event.target)" type="text" class="btn btn-outline-success">
  <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
    <button (blur)="onBlur($event.target)" class="btn btn-outline-primary" ngbDropdownToggle></button>
    <div class="dropdown-menu" ngbDropdownMenu>
      <button class="dropdown-item">One</button>
      <button class="dropdown-item">Two</button>
      <button class="dropdown-item">Four!</button>
    </div>
  </div>
</div>

- RonnBlack

Answer 2

在formarray中控件的模糊事件不触发

同样的问题，即模糊事件没有触发，以及@ronnblack建议的相同解决方案，尽管是在不同的情况下： 在我的情况下，在formarray下，模糊事件没有触发。在开发模式下，模糊事件确实被触发了，但在生产构建中，输入和选择中没有触发模糊事件，其他情况没有检查。解决方案是相同的，为formarray的包含div设置tabindex="0"，然后事件开始触发。以防万一，如果有人遇到相同的情况。

- viking

---

什么？非常感谢您的评论。否则我永远不会想到这个。 - Meqwz