javascript 从指令发出事件时Angular 事件发送器不工作

b4wnujal  于 2023-01-04  发布在  Java
关注(0)|答案(2)|浏览(104)

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
第一个月
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,但无法完成。请告诉我这里出了什么问题。

0pizxfdo

0pizxfdo1#

我认为您最好在子组件上调用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

oyxsuwqo

oyxsuwqo2#

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

相关问题