Angular2 – @HostListener(‘focus’)不起作用

我在下面看了一篇文章.

HTML5 event handling(onfocus and onfocusout) using angular 2

还看到文章上出现了一个羽毛球.

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与焦点事件一起使用？