Angular 从指令发出事件时，eventemitter 不工作

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});
    }
}

` 在上面的代码中，我试图使用 eventemitter 从 appcomp 调用 parentFunc，但无法完成这项工作。请告诉我这里有什么问题。

Answer 1

我认为你最常在子组件上调用 callEmit

childcomp.html

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

并在子组件中发出从 appComp 调用的 CallEmit

childcomp.ts

@Output() callEmit = new EventEmitter();

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

最后使用

appCom.html

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

appcom.ts

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

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

Angular 从指令发出事件时，eventemitter 不工作

Angular eventemitter not working when emitting the event from directive

javascript

dom

eventemitter

angular