我使用了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
});
