Angular2 - 从模块动态加载组件

Question

在我的 Angular 应用程序中，我有以下内容：

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 或其他东西，使用智能感知，但我很懒......我应该从文档中阅读这些东西，即angular.io 中对于这个特定参数相当乏味，这是在没有路由器的情况下延迟加载组件和模块。

感谢任何帮助，我认为该解决方案易于应用，但如果没有官方文档则很难找到。

Answer 1

更新：

如果你想和aot编译一起使用你应该手动提供Compiler like

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

Example

旧版本

也许对你有帮助：

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

另见

• 与answer 和example 相关
• How to use variable to define templateUrl in Angular2
• 来自 angular2 的示例代码 source code

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);
            });
    }
}