Question

您好我是angular2和打字稿的新手。我正在动态加载组件，我想知道是否有办法使用模块中的服务声明我的组件＆＃34;声明＆＃34;和＆＃34; entryComponents＆＃34;。

使用typescript，我可以通过执行以下操作来实现它：

＆＃13;

import { ComponentLoaderService } from './../../services/component-loader.service';

let componentsToLoad = ComponentLoaderService.getComponents();

@NgModule({
  declarations: [ componentsToLoad ],
  entryComponents: [ componentsToLoad ],
})
export class testModule {}

＆＃13;

这实际上有效，但前提是我已经编译并且服务器首先运行。

如果，我尝试重新编译并运行它，我会得到这个常量错误：

＆＃34;在静态解析符号值时遇到错误。不支持函数调用。考虑使用对导出函数的引用替换函数或lambda，＆＃34;

我的另一个想法是，有没有办法将组件加载到＆＃34;导出类testModule {}＆＃34;部分填充数组，然后传递给NgModule？

从我目前的测试来看，它不起作用，但我还是新手，所以我可能会遗漏一些东西。

希望有人可以提供帮助。谢谢！

以下是创建编译错误的代码：

我刚做了一个新的测试应用程序。

然后在test-app文件夹中我做了npm install。

我创建了/src/app/services/components-loader.service.ts。

import { Injectable } from '@angular/core';
import { ViewContainerRef, ViewChild, ComponentFactoryResolver } from '@angular/core';

@Injectable()
export class ComponentLoaderService {
    constructor(private componentFactoryResolver: ComponentFactoryResolver){}

    static getComponents(components: any[]): any[] {
        var tmp = Array();

        for (var i = 0; i < components.length; ++i){
            if (components[i].key == 0){
                tmp.push(components[i].component);
            }
        }

        return tmp;
    }

    load(container: ViewContainerRef, components: any[]): void {
        // clear 
        container.clear();

        for (var i = 0; i < components.length; ++i){
            if (components[i].key == 0 || components[i].key == 'site'){
                const childComponent = this.componentFactoryResolver.resolveComponentFactory( components[i].component );

                // at this point we want the "child" component to be rendered into the app.component:
                container.createComponent(childComponent);          
            }            
        }
    }
}

我创建了一个文件/src/app/components.ts。

import { TestComponent } from './test.component';

export const mainComponents = [
    { key: 0, component: TestComponent },        
];

我创建了一个文件/src/app/test.component.ts。

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

@Component({
  template: `test`,
})
export class TestComponent {}

我修改了/src/app/app.module.ts看起来像这样。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { mainComponents } from './components';
import { ComponentLoaderService } from './services/components-loader.service';

let componentsToLoad = ComponentLoaderService.getComponents(mainComponents);

@NgModule({
  declarations: [
    AppComponent,
    componentsToLoad
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [ componentsToLoad ],
})
export class AppModule { }

当我使用ng serve编译时，我收到此错误：

10％构建模块2/2模块0 activeError：遇到错误静态解析符号值。不支持函数调用。考虑使用对a的引用替换函数或lambda 导出函数，解析符号AppModule in D：/angularjs/test-app/src/app/app.module.ts，解析符号 App中的AppModule：/ angularjs/test-app/src/app/app.module.ts

Answer 1

@NgModule({
    declarations: [],
    exports: []
})
export class testModule {
    static withComponents(components: any[]) {
        return {
            ngModule: testModule,
            providers: [
                {provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: components, multi: true}
            ]
        }
    }
}

其他模块：

import { ComponentLoaderService } from './../../services/component-loader.service';

let componentsToLoad = ComponentLoaderService.getComponents();

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        testModule.withComponents([
            ...componentsToLoad
        ])
    ],
    declarations: [
        AppComponent,
        ...componentsToLoad
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

通过在此处使用ANALYZE_FOR_ENTRY_COMPONENTS，您可以动态地向NgModule.entryComponents条目添加多个组件。

使用服务

1 个答案: