Question

为了加载动态组件，我使用materail选项卡如下：

<md-tab-group [selectedIndex]="selectedTabIndex" *ngIf="tabs && tabs.length > 0">
    <md-tab *ngFor="let tab of tabs">
        <template md-tab-label>
            {{tab.title}}
            <span class="k-icon k-i-close mat-tab-close" (click)="close(tab)"></span>
        </template>
        <dcl-wrapper [type]="tab.component"></dcl-wrapper>
    </md-tab>
</md-tab-group>

我想从不同的模块将组件加载到此选项卡中。加载过程使用 dcl-wrapper 完成，如以下链接中所示：

https://stackoverflow.com/a/37154680/5285133

我使用webpack代码拆分策略将单独的模块组件提供给dcl-wrapper。

require.ensure(["../../dmy/dmy.module"], (reqire : any) => {
    let cmp = require("../../dmy/page/page2")["Page2"];
    this.tabs.push({ title: "--", component: cmp });
    this.selectedTabIndex = this.tabs.length - 1;
    this._cdr.detectChanges();
}, "dmy");

但我得到＆＃34; 找不到Page2的组件工厂。你有没有把它添加到@ NgModule.entryComponents？＆＃34;错误。

我还尝试用这种方式用SystemJsNgModuleLoader加载单独的模块组件：

this._loader.load('../../dmy/dmy.module#DMYModule').then((factory: NgModuleFactory<any>) => {
    console.log(factory);
});

它给出了这个错误：

错误：无法找到模块＆＃39; ../../ dmy / dmy.module＆＃39;。？在webpackEmptyContext

由于我使用tab组件而不是路由，因此延迟加载不是我想要的解决方案。所以，我想找到一种获取单独模块组件实例的方法。

您是否有任何建议我如何动态加载单独的模块及其组件？

Answer 1

System.import("../../dmy/dmy.module.js")
            .then((module: any) => {
                return module["DMYModule"];
            }).then((type: any) => {
                return this._compiler.compileModuleAndAllComponentsAsync(type);
            }).then((moduleWithFactories: ModuleWithComponentFactories<any>) => {
                const factory = moduleWithFactories.componentFactories.find((x: any) => x.componentType.name === "Page1"); 
                this.tabs.push({ title: "--", component: factory["componentType"], factory: factory });
                this.selectedTabIndex = this.tabs.length - 1;
                this._cdr.detectChanges();
            });

使用Webpack代码拆分动态组件加载

1 个答案: