模糊事件未在角度分量上触发

Posted 2023-02-23

【中文标题】模糊事件未在角度分量上触发

【英文标题】：blur event not firing on angular component

【发布时间】：2019-02-10 03:16:37

【问题描述】：

我正在尝试获得一种反应形式来正确处理模糊事件，但它似乎无法对模糊做出正确反应。

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>

【参考方案1】：

经过大量搜索和实验后，我发现了一些需要让它正常工作的项目。 A fully functional demo can be found here

Outer 元素必须具有：tabindex="0"，这样才能获得焦点。这是通过以下方式实现的：@HostBinding('attr.tabindex') tabindex = '0';

为模糊事件添加 HostListener 将捕获外部组件：@HostListener('blur', ['$event.target']) onBlur(target) ...

您仍然需要捕获内部组件的模糊事件，以便单击和退出仍然会触发。 (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>

【参考方案2】：

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

同样的问题，即blur 事件未触发，以及@ronnblack 建议的相同解决方案，但在不同的情况下： 就我而言，模糊事件没有在formarray 下触发。虽然在开发模式下触发了模糊事件，但是在生产构建中，模糊事件在input 和select 中没有触发，没有检查其他事件。解决方法相同，设置tabindex="0"为formarray包含div，事件开始触发。以防万一，如果有人面临同样的情况。

【讨论】：

什么？非常感谢你的评论。否则我永远不会想到这一点。