Question

在我的Angular RC5应用程序中，我使用以下代码动态加载组件：

    public LoadComponentAsync(componentPath: string, componentName: string, locationAnchor: ViewContainerRef) {
    (<any>window).System.import(componentPath)
        .then(fileContents => {
            return fileContents[componentName];
        })
        .then(component => {
            this.resolver.resolveComponent(component).then(factory => {
                let comp = locationAnchor.createComponent(factory, 0, locationAnchor.injector).instance;
                //...
            });
        });
}

我加载的组件看起来像这样：

import { Component } from "@angular/core";

@Component({
    selector: "my-test",
    template: `Test`,
})
export class Main {
    constructor() {
        alert("Test");
    }
}

由于ComponentResolver已被删除，我正在寻找新的解决方案。我找不到一个。到目前为止我找到的最有希望的解决方案：

    loadSubcomponent(modulePath: string, componentName: string) {
    (<any>window).System.import(modulePath)
        .then((module: any) => module[componentName])
        .then((type: any) => {
            return this.compiler.compileModuleAndAllComponentsAsync(type)
        })
        .then((moduleWithFactories: ModuleWithComponentFactories<any>) => {
            const factory = moduleWithFactories.componentFactories.find(x => x.componentType.name === componentName);
            let componentRef = this.extensionAnchor.createComponent(factory, 0);
        });
}

来源：Angular2 RC6 - Dynamically load component from module

不幸的是，它不像我预期的那样有效。当我调用this.loadSubcomponent（＆＃34; / main＆＃34;，＆＃34; Main＆＃34;）;我收到以下错误消息：

core.umd.js：2834 EXCEPTION：未捕获（在承诺中）：错误：没有NgModule 找到Main的元数据

有什么建议吗？

Answer 1

以下内容并未完全回答这个问题，但它提供了一个可能的解决方案。

上述错误的发生是因为我们需要加载模块而不是单个组件。通过添加@NgModule并声明组件，我们可以按预期加载它。

以下是一个模块的小例子，其中包含可以通过调用

加载的组件

this.loadSubcomponent（“/ main”，“Main”）;

从上面

：

@NgModule({
declarations: [Main]
})

@Component({
    selector: "my-test",
    template: `Test`,
})
export class Main {
    constructor() {
        alert("Test");
    }
}

看起来我不是唯一一个只想加载组件的人：

Removal of compileComponentAsync in RC6

Angular 2.2使用System.import动态加载组件

1 个答案: