Angular 2.2使用System.import动态加载组件 [英] Angular 2.2 Dynamically load components using System.import

问题描述

在Angular RC5应用中，我使用以下代码动态加载组件:

In my Angular RC5 app I used the following code to dynamically load components:

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

我正在加载的组件看起来像这样:

A component I was loading looked like this:

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

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

由于ComponentResolver被废弃，因此我正在寻找新的解决方案.我找不到一个.到目前为止，我找到的最有希望的解决方案:

Since ComponentResolver is depricated, I am looking for a new solution. I could not find one. The most promising solution I found so far:

    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-从模块动态加载组件

不幸的是，它没有按我预期的那样工作.当我调用this.loadSubcomponent("/main"，"Main");我收到以下错误消息:

Unfortunately, it does not work as I expected. When I call this.loadSubcomponent("/main", "Main"); I get the following error message:

core.umd.js:2834例外:未捕获(已承诺):错误:没有NgModule找到Main的元数据

core.umd.js:2834 EXCEPTION: Uncaught (in promise): Error: No NgModule metadata found for Main

有什么建议吗?

推荐答案

以下内容不能完全回答问题，但可以提供解决方案.

The following does not answer the question completely but it gives a possilbe solution.

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

The error above happens because we need to load a module and not a single component. By adding @NgModule and declaring the component we can load it as expected.

这是一个带有组件的模块的小示例，可以通过调用

Here is a small example of a module with a component that can be loaded by calling

this.loadSubcomponent("/main"，"Main");

this.loadSubcomponent("/main", "Main");

从上方:

@NgModule({
declarations: [Main]
})

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

似乎我不是唯一希望仅加载组件的人:

It looks like I am not the only one who would like to be able to load only components:

在RC6中删除compileComponentAsync

这篇关于Angular 2.2使用System.import动态加载组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！