Question

在有角度的网站上有新的api SystemJsNgModuleLoader。

剂量任何人都知道如何使用此API在应用程序中加载动态模块？

Answer 1

我知道你会找到解决方案，但作为其他人的参考我正在提供解决方案。该代码已得到很好的评论，并且很容易理解。

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。

Answer 2

我发现了一些使用SystemJsNgModuleLoader的示例。

Angular2 +从路径动态加载模块和组件。： https://embed.plnkr.co/khdS8xFkvqe7ZIsz0kc7/

Angular2 + SystemJsNgModuleLoader测试： https://embed.plnkr.co/mgdBhKpCVI1LRQ2l81pC/

在运行时动态导入模块： https://myview.rahulnivi.net/dynamically-importing-modules-runtime/

另一种延迟加载外部库的方式： https://github.com/angular/angular-cli/issues/6373

从node_modules延迟加载功能库模块： https://github.com/angular/angular/issues/25083

为什么以及如何延迟加载Angular库： https://medium.com/@tomastrajan/why-and-how-to-lazy-load-angular-libraries-a3bf1489fe24

我希望这会有所帮助。

谢谢，吉涅什·拉瓦尔（Jignesh Raval）

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

2 个答案: