javascript - 如何在 Angular4 中检测父 div 上的焦点而不是子 div 上的焦点

Question

我有一个自定义自动完成元素。它由一个输入字段、一个按钮和一个包含自动完成功能的 div 组成。我想要的行为是，当我在输入框或下拉列表外部单击时，它会调用一个回调来保存输入字段中的所有内容，如果我单击下拉选择，我希望它调用选择我单击的内容并保存该内容的事件。

但目前，当我单击下拉列表时，焦点会被调用，下拉列表不会关闭，并且在第二次单击时它实际上会选择下拉列表值，而不是按预期工作。

这是组件:

    <div class="input-group input-group-sm " (focusout)="blur($event)">
  <input type="text" class="form-control" [ngModel]="userInput" title="{{userInput}}" (ngModelChange)="onValueChanged($event)"
    (focus)="$event.target.select()">
  <div>
    <button type="button" class="btn btn-secondary dropdown-toggle" (click)="showPredefinedOptions()">
    </button>
    <div *ngIf="showDropdown" [ngClass]="{'dropdown-menu dropdown-menu-right':true, 'show-address-autocomplete':showDropdown}">
      <div *ngIf="currentUserAddresses">
        <a *ngFor="let item of currentUserAddresses" class="dropdown-item ekat-dropdown-item" (click)="chooseAddress(item)">{{item}}</a>
        <div class="divider dropdown-divider"></div>
      </div>
      <a *ngFor="let item of currentResult" class="dropdown-item ekat-dropdown-item" (click)="chooseAddress(item)">{{item}}</a>
    </div>
  </div>
</div>

在 ts 文件中，我有一行 @Output() focusOut: EventEmitter = new EventEmitter();它定义了我订阅的 focusoutevent。

这就是我使用它的方式:

<td> <address-autocomplete [value]="product.defaultDeliveryAddress ? defaultAddress : product.deliveryAddress"  (onSelect)="onAddressChanged($event, product)"
                                 [userAddresses]="userAddressed" (onWritten)="onAddressWritten($event, product)" (focusOut)="focusOut(product)">></address-autocomplete></td>

为什么当我点击下拉元素时会调用焦点？

Answer 1

使用更方便Angular's Reactive Forms为此:

<input type="text" [formControl]="inputControl">

<select [formControl]="selectControl">
  <!-- ... -->
</select>

import { FormControl } from '@angular/forms';

export class MyComponent {
  inputControl = new FormControl(null, { updateOn: 'blur' });
  selectControl = new FormControl(null, { updateOn: 'change' });

  ngOnInit() {
    inputControl.valueChanges.subscribe(value => {
      // ...
    });
    selectControl.valueChanges.subscribe(value => {
      // ...
    });
  }
}