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

现在，我想触发我放置指令的组件的点击事件

<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() 事件中时，我注意到该事件没有被调用我引用了这个 blog

Answer 1

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

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

Not able to bind click event in @Directive in angular4

eventemitter

angular-directive

angular