在Angular 7中，如何访问发出事件的组件？

Question

Let's say I have a component with a custom event:

child.component.html

<button (click)="buttonClicked()">Test</button>

child.component.ts

@Component({
  selector: 'my-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
    @Output() myEvent = new EventEmitter();

    public buttonClicked() {
        this.myEvent.emit();
    }
}

Then I have another component that contains multiple instances of the first component.

parent.component.html

<my-child id="my-child-component-1" (myEvent)="myEventOccured()" />
<my-child id="my-child-component-2" (myEvent)="myEventOccured()" />

parent.component.ts

@Component({
  selector: 'my-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
    public myEventOccured() {
        //HERE I WANT I REFERENCE TO THE COMPONENT EMITTING THE EVENT.
    }
}

In the function that handles the custom event of the child components (myEventOccured()), I want to access the component that emitted the event. How do I do that?

I'm thinking maybe I should send the emitting component as an argument to the function handling the event (myEventOccured()), but I don't know how.

Answer 1

you can pass a value when emitting, and collect it back in parent using $event

@Component({
  selector: 'my-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
    @Output() myEvent = new EventEmitter<ChildComponent>(); // for better type checking

    public buttonClicked() {
        this.myEvent.emit(this); // emit reference to this component
    }
}

<my-child id="my-child-component-1" myEvent="myEventOccured($event)" />

@Component({
  selector: 'my-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
    public myEventOccured(child: ChildComponent) {
        console.log(child);
    }
}

However, I'm not sure it is a good practice to pass the entire component. You may consider emitting only what you really need in the parent.