Question

我有一个Angular 2项目，我动态生成子组件，我想听一个由该组件调度的自定义事件。

这是我的父组件，它生成组件并侦听事件

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

这是我的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);
  }
}

我需要能够收听正在发送的事件但是出于我的目的，我不能使用该模板并希望直接从我的打字稿中听。我已成功完成了“点击”事件，但我的自定义事件已发送但从未被检测到。

我附上了一个用来展示我的用例的傻瓜

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

Answer 1

如果你想订阅你的isLoaded事件只是投射工厂创建的组件并订阅isLoaded事件，那么它不应该如何工作。

只需改变你的：

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

有关：

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

第一个案例有效，因为这是主持人的本机事件。

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

1 个答案: