Angular2 - @HostListener（'focus'）不起作用

Question

我試圖通過@HostListener捕獲焦點事件。 但它不適合我。

我在下面看到一篇文章。

HTML5 event handling(onfocus and onfocusout) using angular 2

還看見一個plunker出現在文章。

http://plnkr.co/edit/0K1nxX2ltZ4ztfe5uJ6E?p=preview

它的工作在我身上。 但是我改變它如下，它不會工作。

@Component({ 
    selector: 'my-app', 
    template: `<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">` 
}) 
export class App { 
    @HostListener('focus', ['$event.target']) 
    onFocus(target: any) 
     console.log("Focus called from HostListener"); 
     target.type = 'date'; 
    } 
    @HostListener('focusout', ['$event.target']) 
    onFocusout(target: any) { 
     console.log("Focus out called from HostListener"); 
     target.type = 'text'; 
    } 

    focusOutFunction(){ 
     console.log("Focus out called"); 
    } 
    focusFunction(){ 
     console.log("Focus called"); 
    } 
} 

關於聚焦，他們都被調用。 但焦點（focusin）只能使用focusFunction，而不能通過@HostListener在onFocus上工作。

我如何使@HostListener與焦點事件一起工作？

Answer 1

這是因爲@HostListener將偵聽器附加到主機元素。在這種情況下，您的主機元素是<my-app></my-app>元素。當您關注<input>元素時，焦點事件不會冒泡到其父項。此外，只有某些元素實際上可以觸發focus事件，並且my-app元素不是其中之一。

您發佈的示例使用@Directive，它們放置在<input>元素上。這顯然可以監聽指令上的焦點事件。

但是，通過將tabindex="0"設置爲屬性，您可以通過自定義元素觸發(focus)事件。

Answer 2

使用模糊，而不是事件的內容 HostListener

@HostListener('blur') onblur() { ....... ....... }