我正在使用以下代码在父应用程序中动态加载Angular模块:
@Component({
selector: 'app-dynamic-pack',
template: '<ng-container #vc ></ng-container>',
styleUrls: ['./dynamic-pack.component.scss']
})
export class DynamicPackComponent implements OnInit {
@ViewChild('vc', { read: ViewContainerRef }) vc: ViewContainerRef;
constructor(public compiler: Compiler, private injector: Injector, private sysplexesService: SysplexesService) { }
ngOnInit() {
this.loadRemoteModule();
}
loadRemoteModule() {
const remoteModule = this.sysplexesService.getRemoteModule();
// These library are already present, so no need to reload them.
SystemJS.set('@angular/core', SystemJS.newModule(AngularCore));
SystemJS.set('@angular/common', SystemJS.newModule(AngularCommon));
SystemJS.set('@angular/material', SystemJS.newModule(AngularMaterial));
SystemJS.set('@angular/router', SystemJS.newModule(AngularRouter));
SystemJS.set('d3', SystemJS.newModule(d3));
SystemJS.set('@angular/common/http', SystemJS.newModule(HttpClientModule));
SystemJS.set('moment', SystemJS.newModule(moment));
SystemJS.import(remoteModule.url).then((module) => {
this.compiler.compileModuleAndAllComponentsAsync(module[`${remoteModule.name}Module`])
.then((moduleFactory) => {
const moduleRef = moduleFactory.ngModuleFactory.create(this.injector);
const factory = moduleFactory.componentFactories.find(
item => item.componentType.name === `${remoteModule.name}Component`);
if (factory) {
const component = this.vc.createComponent(factory);
const instance = component.instance;
}
});
});
}
}
我的问题是将某些数据传递到动态加载的组件(#vc)的最佳方法是什么?
我应该尝试创建一个共享模块,该模块承载在远程模块中声明为peerDependencies的服务吗?