如何在通过Systemjs动态加载的父模块和angular模块之间共享数据

时间:2019-04-26 16:18:06

标签: angular7 systemjs viewchild

我正在使用以下代码在父应用程序中动态加载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的服务吗?

0 个答案:

没有答案