[英]Not able to bind click event in @Directive in angular4
I have a simple Directive like this 我有一个简单的指令,像这样
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();
}
}
now, i want to trigger the click event of the component where i have placed the directive like this 现在,我想触发放置指令的组件的click事件,如下所示
<button type="button" class="btn btn-secondary" data-dismiss="modal" appAppClick (clickDirective)="parentClick()"> Proceed</button>
this is the component ts code 这是组件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');
}
}
when i placed the debugger inside the directives onclick() event, i noticed that the event is not getting called i refrenced this blog 当我将调试器放置在指令onclick()事件中时,我注意到该事件未得到调用,我对此博客进行了评论
@HostListener('click',['$event']) onclick($event) {
debugger;
this.clickDirective.emit();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.