我使用了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!
})
答案 0 :(得分:6)
目前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
});