代码之家 › 专栏 › 技术社区 › RonnBlack

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

custom-controls components angular

RonnBlack · 技术社区 · 7 年前

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 回复 | 直到 7 年前

RonnBlack 7 年前

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

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>

viking 4 年前

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

同样的问题,即。 blur 事件未触发,解决方案与 @ronnblack ,在不同的情况下,尽管: 在我的例子中,模糊事件不是在 formarray input 和 select ,没有检查其他人。解决办法是一样的 tabindex="0" 用于容纳 div 为了formarray,事件开始了。以防万一,如果有人面临同样的情况。