Angular2 – 从模块动态加载组件

发布时间：2020-12-17 07:19:14 所属栏目：安全来源：网络整理

导读：在我的角度应用程序中,我有以下内容： export class MyComponent { subcompPath = "path-to-subcomp#SubcompClassName"; @ViewChild("placeholder",{ read: ViewComponentRef }) placeholderRef: ViewComponentRef;/* Constructor where Compiler,ComponentF

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

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用于此特定参数,即没有路由器的组件和模块的延迟加载.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!