無法在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();
  }