title: Angular Event handler firing for every instance of component
body: <p>I have a page (hostview) in which I dynamically create components that holds information including a p-tree that the user creates in the UI.  I add them with a button from the hostview, and I delete them with a button on the tree component, which passes the event back to the host view via a notificationService like so:</p>
  
  <p>Creation in the hostview:</p>
  
  <pre><code>constructor(@Inject(Loader) service, @Inject(ViewContainerRef) viewContainerRef, public dataCenter: DataCenterService,private router: Router) {
      this.service = service;
      this.trees = this.dataCenter.getTreeState();
      this.service.setRootViewContainerRef(viewContainerRef)
      this.newTree();
  }
  
  
  
  newTree() {
      var newTree = this.service.addDynamicComponent();
      newTree.instance.ref = newTree;
  
      newTree.instance.service.onDestroyEvent.subscribe(
        treeRef =&gt; {
          for(var i=0;i&lt;this.trees.length; i++){
            if(this.trees[i].instance.ref == treeRef){
              this.trees.splice(i,1);
            }
          }
         }
        );
      this.trees.push(newTree);
  }
  </code></pre>
  
  <p>Notification service:</p>
  
  <pre><code>export class NotificationService {
      onDestroyEvent: EventEmitter&lt;ComponentRef&lt;ConnectionTreeComponent&gt;&gt; = new EventEmitter();
      constructor() {}
  }
  </code></pre>
  
  <p>tree component:</p>
  
  <p>service:NotificationService;</p>
  
  <pre><code>constructor(public dataCenter: DataCenterService, public treeService: TreeDragDropService, service:NotificationService) {
     this.service = service; 
  }
  
  ngOnDestroy() {
     this.service.onDestroyEvent.emit(this.ref); /*ComponentRef passed back to hostview*/
  }
  </code></pre>
  
  <p>So this does technically work, but it is called once for every instance of the the tree component instead of just the once.  How can I fix this to work correctly?</p>