首页 文章

Angular 2动态加载组件,事件没有回击?

提问于
浏览
5

我使用了Angular2动态组件加载器 . 一切都运作良好 .

我动态加载的组件发出事件,但我无法在任何地方捕获它 .

家长代码:

this.dcl.loadAsRoot(SomeComponent, "#dynamiccomponenthere", this.injector)

父模板:

<div id="dynamiccomponenthere" (somecustomevent)="someFunc()"></div>

儿童:

...
this.somecustomevent.emit(data)
...

***SOLUTION: (thx Gunther) ***

cmp.instance['somecustomevent'].subscribe(ev => {
    this.consoleLog(ev) // run function in parent!
})

1 回答

  • 6
    • LoadAsRoot不会调用更改检测

    目前 loadAsRoot() 仅用于引导根组件( AppComponent ),并且根组件不支持输入 .

    此评论中解释了一种解决方法https://github.com/angular/angular/issues/6370#issuecomment-193896657

    使用loadAsRoot时,您需要触发变化检测并手动连接输入,输出,进样器和组件配置功能

    function onYourComponentDispose() {
    }
    let el = this.elementRef
    let reuseInjectorOrCreateNewOne = this.injector;
    this.componentLoader.loadAsRoot(YourComponent, this.elementRef, reuseInjectorOrCreateNewOne, onYourComponentDispose)
    .then((compRef: ComponentRef) => {
      // manually include Inputs
      compRef.instance['myInputValue'] = {res: 'randomDataFromParent'};
      // manually include Outputs
      compRef.instance['myOutputValue'].subscribe(this.parentObserver)
      // trigger change detection
      cmpRef.location.internalElement.parentView.changeDetector.ref.detectChanges()
      // always return in a promise
      return compRef
    });
    

    另见@ContentChild is null for DynamicComponentLoader

相关问题