Angular eventemitter not working when emitting the event from directive

Question

appcomp.html

`<app-child (callemit) = parentFunc($event)> </app-child>`

appcomp.ts

`

import { Component, OnInit, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.comp.html'
})
export class AppComponent {
  ngOnInit() {}
  parentFunc(event){
    console.log(event)
  }
}

`

childcomp.html

<a href='' [mydirective]="val"> </a>

childcomp.ts

`

@Component({
  selector: 'app-child',
  templateUrl: './app.child.component.html'
})

`

mydirective.ts

`

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

@Directive({
    selector: '[myDirective]'
})
export class myAppDirective {
    constructor() {}
    @Input ('myDirective') val: string;
    @Output() callEmit = new EventEmitter();
    @HostListener('click')
    onClick() {
     event.preventDefault();
     this.callEmit.emit({event , val});
    }
}

` In the above code i am trying to call parentFunc from appcomp using eventemitter and not able to get this work. Please let me know what is wrong here.

Answer 1

I think you most call callEmit on child component

childcomp.html

<a href='' [mydirective]="val" (callEmit)="childFunc($event)"> </a>

and in child Component emit the CallEmit Which called from appComp

childcomp.ts

@Output() callEmit = new EventEmitter();

childFunc(){
this.callEmit.emit();
}

and finally use

appCom.html

`<app-child (callemit) = parentFunc($event)> </app-child>`

appcom.ts

 parentFunc(event){
    console.log(event)
  }

https://stackblitz.com/edit/angular-exxhms

Answer 2

<a href='#' mydirective (callEmit)="childFunc($event)">Try it on component</a>

Answer 3

您的子组件html应该如下所示：

<a href='' (click)="onClick(val)"> </a>