Angular2 - 从模块动态加载组件

Question

在我的角度应用程序中,我有以下内容:

export class MyComponent {
    subcompPath = "path-to-subcomp#SubcompClassName";
    @ViewChild("placeholder", { read: ViewComponentRef }) placeholderRef: ViewComponentRef;

/* Constructor where Compiler, ComponentFactoryResolver are injected */

    loadSubcomponent() {
        let [path, componentName] = this.subcompPath.split("#");
        (<any>window).System.import(path)
            .then((module: any) => module[componentName])
            .then((type: any) => {
                return this._compiler.compileComponentAsync(type)
            })
            .then((factory: any) => {
                let componentRef = this.placeholderRef.createComponent(factory, 0);
            });
    }
}

我的子组件声明了提供者和东西,指令和管道.

而现在RC6又打破了一切.组件不能声明指令和管道,但它们必须位于声明组件的模块中.所以我必须加载SystemJS而不是组件本身而是模块.好的,然后我应该使用

return this._compiler.compileModuleAndAllComponentsAsync(type)

很好,但是如何获得该特定组件的工厂参考？那个工厂就是我所需要的,placeholderRef想要它的createComponent方法,对吧？

我试图从github挖掘angular2源代码,但是它非常庞大,我应该尝试使用VS Code或者其他东西,使用intellisense,但我很懒...我应该从文档中读取这些内容,这些内容相当平淡无奇. angular.io这个特定的参数,它是没有路由器的组件和模块的延迟加载.

感谢任何帮助,我认为解决方案很容易应用,但没有官方文档很难找到.

Answer 1

更新:

如果你想将它与编译一起使用,你应该手动提供编译器

export function createJitCompiler () {
   return new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler();
}
...
providers: [
  { provide: Compiler, useFactory: createJitCompiler}
],

例

旧版

它可能会帮助你:

this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
      .then(({moduleFactory, componentFactories}) => {
        const compFactory = componentFactories
           .find(x => x.componentType === DynamicComponent);
        const cmpRef = this.placeholderRef.createComponent(compFactory, 0);

也可以看看

• 相关的答案与例子
• 如何使用变量在Angular2中定义templateUrl
• 来自angular2 源代码的示例代码

Answer 2

根据yurzui的回答,我来看下面的代码:

export class MyComponent {
    subcompPath = "path-to-subcompMODULE#SubcompClassName";
    @ViewChild("placeholder", { read: ViewComponentRef }) placeholderRef: ViewComponentRef;

    /* Constructor where Compiler, ComponentFactoryResolver are injected */

    loadSubcomponent() {
        let [modulePath, componentName] = this.subcompPath.split("#");
        (<any>window).System.import(modulePath)
            .then((module: any) => module["default"])  // Or pass the module class name too
            .then((type: any) => {
                return this._compiler.compileModuleAndAllComponentsAsync(type)
            })
            .then((moduleWithFactories: ModuleWithComponentFactories<any>) => {
                const factory = moduleWithFactories.componentFactories.find(x => x.componentType.name === componentName); // Crucial: componentType.name, not componentType!!
                let componentRef = this.placeholderRef.createComponent(factory, 0);
            });
    }
}