dynamic - 如何在 Angular 2 中使用“SystemJsNgModuleLoader”将动态模块导入应用程序？

Question

在 Angular 网站中有新的 api SystemJsNgModuleLoader。

有谁知道我如何使用这个 api 在应用程序中加载动态模块？

score 2 · Accepted Answer

我知道您会找到解决方案，但为了其他人的参考，我提供了解决方案。该代码已得到很好的注释，并且易于理解。

createComponent(fileName, componentName){
    let injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
    // 1. Create module loader
    let loader = new SystemJsNgModuleLoader(this.compiler);
    loader.load(fileName).then((nmf:NgModuleFactory<any>)=>{
        // 2. create NgModuleRef
        let ngmRef = nmf.create(injector);
        // 3. Create component factory
        let cmpFactory = ngmRef.componentFactoryResolver.resolveComponentFactory( componentName );
        // 4. Create the component
        let componentRef = this.span.createComponent(cmpFactory,0,injector,[]);
        // 5. Init the component name field.
        componentRef.instance.name = "Some Name";
        // 6. Refresh the component area.
        componentRef.changeDetectorRef.detectChanges();
        componentRef.onDestroy(()=> {
            componentRef.changeDetectorRef.detach();
        });
    });
}

通过使用上述函数，我们可以从任何来源注入模块。更多请参考this。