javascript - Directive in angular2 gets click event

Question

directive code:

import {Directive, ElementRef, EventEmitter, HostListener, Output} from '@angular/core';

@Directive({
    selector: '[cz-click]' // Attribute selector
})
export class CzClickDirective {

    constructor(public element: ElementRef) {

    }
    @Output() myClick  = new EventEmitter();

    @HostListener("click",["$event"])
    onClick(e){
        this.myClick.emit(e);
    }

}

html中

 <button (myClick)="testdata()">登录</button>

The idea is to write a directive to replace (click)
Now after writing it like this, it has no effect and no error is reported. . . .
Could you please tell me, seniors, where did you write this wrong? Thank you 0-0

Answer 1

selector is "[cz-click]"

You only wrote (myClick), this element was not found at all

Just add cz-click

<button cz-click (myClick)="testdata()">登录</button>