typescript – Angular 2动态加载组件,事件没有回击？

发布时间：2020-12-17 17:41:41 所属栏目：安全来源：网络整理

导读：我使用了Angular2动态组件加载器.一切都运作良好. 我动态加载的组件发出事件,但我无法在任何地方捕获它. 家长代码： this.dcl.loadAsRoot(SomeComponent,"#dynamiccomponenthere",this.injector) 父模板： div id="dynamiccomponenthere" (somecustomevent)=

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

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

家长代码：

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

父模板：

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

儿童：

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

*解决方案:( thx Gunther)*

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

解决方法

> LoadAsRoot不会调用更改检测

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

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

when using loadAsRoot you need to trigger change detection and manually wire up Inputs,Outputs,Injector,and the component dispose function

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!