[英]How to detect focusout on parent div not on child div in Angular4
我有一个自定义的自动填充元素。 它由一个输入字段,一个按钮和一个包含自动完成功能的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>
为什么当我单击下拉元素时调用聚焦?
为此,更容易使用Angular的反应形式 :
<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 => {
// ...
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.