无法在angular4的@Directive中绑定单击事件

Question

我有一个简单的指令，像这样

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

@Directive({
  selector: '[appAppClick]'
})
export class AppClickDirective {
  @Output() clickDirective: EventEmitter<any> = new EventEmitter();
  constructor() { }
  @HostListener('onClick') onclick() {
    debugger;
    this.clickDirective.emit();
  }
}

现在，我想触发放置指令的组件的click事件，如下所示

<button type="button" class="btn btn-secondary" data-dismiss="modal" appAppClick (clickDirective)="parentClick()"> Proceed</button>

这是组件ts代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  parentFunc() {
    alert('parent function called');
  }
}

当我将调试器放置在指令onclick（）事件中时，我注意到该事件未得到调用，我对此博客进行了评论

Answer 1

@HostListener('click',['$event']) onclick($event) {
    debugger;
    this.clickDirective.emit();
  }