Blur funktioniert nicht - Angular 2

Question

Ich versuche, ein blaues Ereignis in Winkel 2 wie so einzustellen:

<div id="area-button" (blur)="unfocusAreaInput()" class="form-group" (click)="focusAreaInput()"> 

component.ts:

import { Component, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core'; 
import { GoogleplaceDirective } from 'angular2-google-map-auto-complete/directives/googleplace.directive'; 

@Component({ 
    selector: 'my-area', 
    directives: [GoogleplaceDirective], 
    templateUrl: 'app/find-page/area-picker.component.html', 
    styleUrls: ['app/find-page/area-picker.component.css'] 
}) 
export class AreaComponent { 
    public address: Object; 
    @ViewChild('areaInput') areaInput; 
    areaSelected: boolean = false; 
    @Output() onAreaSelected = new EventEmitter<boolean>(); 
    @Output() onAreaDeselected = new EventEmitter<boolean>(); 

    constructor(el: ElementRef) { } 
    getAddress(place: Object) { 
     this.address = place['formatted_address']; 
     var location = place['geometry']['location']; 
     var lat = location.lat(); 
     var lng = location.lng(); 
     console.log("Address Object", place); 
    } 

    focusAreaInput() { 
     this.areaInput.nativeElement.focus(); 
     this.onAreaSelected.emit(true); 
    } 

     unfocusAreaInput() { 
     this.onAreaSelected.emit(false); 
    } 
} 

unfocusAreaInput() wird nie ausgeführt. Warum?

Answer 1

Ihr blur Ereignis funktioniert nicht, weil Ihr div den Fokus überhaupt nicht erhalten kann. Wenn Sie hinzufügen tabindex="1" (1 kann mit einer beliebigen Nummer ersetzt werden) oder contentEditable (dies wird div den Inhalt bearbeitbar machen) zu Ihrem div, wird es in der Lage sein, Fokus zu erhalten und dann blur Ereignis wird funktionieren. Außerdem können Sie dann focus anstelle von click verwenden.

Answer 2

Verwenden Sie tabindex -Eigenschaft mit it.Setting tabindex = "0" wird es höchste Priorität beim Erzielen von Fokus, damit Ihre Blur-Event funktioniert