Angular2-从模块动态加载组件

Etchelon 发表于 Dev

埃切隆

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

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源代码，但是它相当庞大，我应该使用intellisense从VS Code或其他东西尝试，但是我很懒...我应该从文档中阅读这些东西，这在相当乏味的此特定参数的angular.io，是在没有路由器的情况下延迟加载组件和模块。

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

埃切隆

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