Angular 2个模块的角度动态组件声明
我尝试动态加载一些组件。所以我用这种方式定义我的“加载器”组件Angular 2个模块的角度动态组件声明,angular,Angular,我尝试动态加载一些组件。所以我用这种方式定义我的“加载器”组件 @ViewChild('vc', {read: ViewContainerRef}) _container: ViewContainerRef; private componentRef: ComponentRef<{}>; constructor( private _compiler: Compiler, private _injector: Injector, private _m:
@ViewChild('vc', {read: ViewContainerRef}) _container: ViewContainerRef;
private componentRef: ComponentRef<{}>;
constructor(
private _compiler: Compiler,
private _injector: Injector,
private _m: NgModuleRef<any>
) {}
@ViewChild('vc',{read:ViewContainerRef})\u container:ViewContainerRef;
私有componentRef:componentRef;
建造师(
专用编译器:编译器,
专用注射器:注射器,
私有:NgModuleRef
) {}
在我的模板中,我添加了
<ng-template #vc></ng-template>
这里是加载动态组件的函数
compileTemplate() {
let metadata = {
selector: `runtime-component-sample`,
template: `some html and some <app-foo></app-foo>`
};
if (this.componentRef) {
this.componentRef.destroy();
this.componentRef = null;
}
let factory = this.createComponentFactorySync(this._compiler, metadata, null);
this.componentRef = this._container.createComponent(factory);
}
private createComponentFactorySync(compiler: Compiler, metadata: Component, componentClass: any): ComponentFactory<any> {
var datas = someDatas;
var parent = this;
const cmpClass = componentClass || class RuntimeComponent {
context: any = datas;
};
const decoratedCmp = Component(metadata)(cmpClass);
@NgModule({ imports: [CommonModule,FontAwesomeModule], declarations: [decoratedCmp,FooComponent] })
class RuntimeComponentModule { }
let module: ModuleWithComponentFactories<any> = this._compiler.compileModuleAndAllComponentsSync(RuntimeComponentModule);
return module.componentFactories.find(f => f.componentType === decoratedCmp);
}
compileTemplate(){
让元数据={
选择器:`runtime component sample`,
template:`一些html和一些`
};
if(this.componentRef){
this.componentRef.destroy();
this.componentRef=null;
}
让工厂=this.createComponentFactorySync(this.\u编译器,元数据,null);
this.componentRef=this.\u container.createComponent(工厂);
}
私有createComponentFactorySync(编译器:编译器,元数据:组件,组件类:任意):组件工厂{
var数据=一些数据;
var parent=此;
常量cmpClass=componentClass | | class RuntimeComponent{
上下文:any=datas;
};
const decoratedCmp=组件(元数据)(cmpClass);
@NgModule({imports:[CommonModule,FontAwesomeModule],声明:[decoratedCmp,FooComponent]})
类RuntimeComponentModule{}
让module:moduleWithComponentFactorys=this.\u compiler.compileModuleAndAllComponentsSync(RuntimeComponentModule);
返回module.componentFactorys.find(f=>f.componentType===decoratedCmp);
}
当我调用compileTemplate时,出现以下错误:
类型FooComponent是两个模块声明的一部分:RuntimeComponentModule和RuntimeComponentModule!请考虑移动< /P>
我在执行createComponentFactorySync之前销毁了我的componentRef。这应该可以避免这个错误
我做错了什么?我只是补充:
compiler.clearCacheFor(FooComponent);