嗨,我是Angular2和Typescript的新手。我正在动态加载组件,我想知道是否有一种方法在模块的"声明"one_answers" entryComponents"中使用服务声明我的组件。
使用TypeScript,我可以通过以下内容来实现它:
import { ComponentLoaderService } from './../../services/component-loader.service';
let componentsToLoad = ComponentLoaderService.getComponents();
@NgModule({
declarations: [ componentsToLoad ],
entryComponents: [ componentsToLoad ],
})
export class testModule {}
这实际上有效,但前提是我已经编译并且服务器首先运行。
如果我尝试重新编译并运行它,我会得到这个恒定错误:
"遇到错误的错误在静态上解析符号值。不支持函数调用。考虑以引用导出函数的引用替换功能或lambda,"
我的另一个想法是,是否有一种方法可以将组件的加载放在"导出类TestModule {}"部分中以填充数组,然后将其传递给NGMODULE?
从我当前的测试中它不起作用,但是我仍然是新手,所以我可能会缺少一些东西。
希望有人可以提供帮助。谢谢!
这是创建编译错误的代码:
我只是做了新的测试应用。
然后在test-app文件夹中我进行了npm安装。
i创建/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);
}
}
}
}
我创建了一个file/src/app/components.ts。
import { TestComponent } from './test.component';
export const mainComponents = [
{ key: 0, component: TestComponent },
];
我创建了一个file/src/app/test.component.ts。
import { Component } from '@angular/core';
@Component({
template: `test`,
})
export class TestComponent {}
i修改了/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服务编译时,我会得到此错误:
10%建筑模块2/2模块0 ActiveError:遇到错误 静态解析符号值。功能调用不支持。 考虑用参考 导出功能,解决符号AppModule d:/angularjs/test-app/src/app/app.module.ts,解决符号 d:/angularjs/test-app/src/app/app/app.module.ts
中的appModule
@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。