如何在不使用模板的情况下在Angular 2中检测自定义事件？

Question

I have an Angular 2 project where I am dynamically generating child components and I want to listen to a custom event that is dispatched by that component.

This is my parent component that generates the component and listens for events

 var cmpRef: ComponentRef<any>;
let factory = this.componentFactoryResolver.resolveComponentFactory(type);
cmpRef = this.target.createComponent(factory);

// PROPERLY DETECTS EVENT 
cmpRef.instance.self.nativeElement.addEventListener('click',this.onEventFired);

// DOESN'T DETECT EVENT
cmpRef.instance.self.nativeElement.addEventListener('isLoaded',this.onEventFired);

// call this method to fire the event
(cmpRef.instance as ChildComponent).load();

And this is my ChildComponent

import { Component, OnInit,ChangeDetectorRef, Output,EventEmitter,ElementRef } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '  <p>child component- click on text to fire event!</p>'

})
export class ChildComponent implements OnInit, AfterViewInit {


  @Output('isLoaded') isLoaded:EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor(public self:ElementRef)
  {
    console.log('ChildComponent Created')
  }

  public load()
  {
    console.log('load method called.... dispatching event')
     this.isLoaded.next(true);
  }
}

I need to be able to listen to the events that are being dispatched but for my purposes, I cannot use the template and want to listen directly from my typescript. I have successfully done this with a "click" event but my custom events get dispatched but never gets detected.

I have attached a plunker to show my use case

https://plnkr.co/edit/GGqhRu8pT6Ymz2Bg7oSE?p=preview

Answer 1

That's not how it's supposed to work, if you want to subscribe to your isLoaded event just cast that component created by the factory and subscribe to isLoaded event.

Just change your:

// DOESN'T DETECT EVENT
cmpRef.instance.self.nativeElement.addEventListener('isLoaded',this.onEventFired);

For:

// DOESN'T DETECT EVENT
(<ChildComponent>cmpRef.instance).isLoaded.subscribe(() => {
  console.log("Has been loaded");
});

First case worked because that is a native event of the host.