我有以下代码:
wall.module.ts
import {CommunityComponent} from './components/community.component';
import {KayooModule} from './../kayoo/kayoo.module';
import {PostModule} from './../post/post.module';
import {NgModule} from '@angular/core';
import {WallComponent} from './components/wall.component';
@NgModule(
{
declarations:[ WallComponent,
CommunityComponent
],
imports:[PostModule],
entryComponents: [CommunityComponent],
providers:[ComponentFactoryService],
exports:[WallComponent]
}
)
export class WallModule {}
community.component.ts:
import { Component, Input, ViewContainerRef, ViewChild } from "@angular/core";
import { Base } from './../../kayoo/components/base';
@Component({
selector : 'community',
templateUrl : 'app/templates/community.component.html',
styleUrls : ['app/templates/css/community.component.css'],
})
export class CommunityComponent extends Base
{
constructor()
{
super();
}
public result=(data:any)=>
{
this.community=data;
}
}
wall.component.ts:
import { CommunityComponent } from './community.component';
import { ComponentFactoryService } from './../../services/services/component.fac';
import { Component, Input,ViewChild,ViewContainerRef} from "@angular/core";
@Component({
selector:'wall',
templateUrl:'app/templates/wall.component.html',
styleUrls:['app/templates/css/wall.component.css']
})
export class WallComponent
{
@ViewChild('wallContent', {read: ViewContainerRef}) containerRef: ViewContainerRef;
private com:{[id:string]:any;} =
{
"loadCommunity" : CommunityComponent
};
private parameters : any;
constructor(private factory:ComponentFactoryService)
{
}
}
Base.ts:
import {Input,OnChanges,OnInit,ComponentRef} from "@angular/core";
export class Base
{
@Input() parameters : any;
@Input() ref : ComponentRef<any>;
@Input() cfunc : any;
getParameters() : any
{
return this.parameters;
}
getRef() : ComponentRef<any>
{
return this.ref;
}
getCFunc() : any
{
return this.cfunc;
}
}
core.module.ts
import { AsideModule } from '../../flayer/aside/aside.module';
import { FooterModule } from '../../flayer/footer/footer.module';
import { NavigationModule } from '../../flayer/navigation/navigation.module';
import { HeaderModule } from '../../flayer/header/header.module';
import { WallModule} from '../../flayer/wall/wall.module';
import { ServicesModule } from '../../flayer/services/services.module';
import { CoreService } from '../../core/services/core.service';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule} from '@angular/http';
import { CoreComponent } from './components/core.component';
@NgModule({
imports: [
BrowserModule,
HttpModule,
HeaderModule,
NavigationModule,
WallModule,
FooterModule,
AsideModule,
ServicesModule
],
declarations: [CoreComponent],
entryComponents:[],
providers: [CoreService],
bootstrap: [CoreComponent],
exports: [CoreComponent]
})
export class CoreModule { }
我的Base 类不是组件,属于CoreModule,是组件类的基类,在本例中是CommunityComponent。我想用:
动态创建CommunityComponent let factory = this.componentFactoryResolver.resolveComponentFactory(component);
let injector = ReflectiveInjector.fromResolvedProviders([], refDOM.parentInjector);
let comp = factory.create(injector);
(<Base>comp.instance).parameters=parameters;
(<Base>comp.instance).ref=comp;
(<Base>comp.instance).cfunc=cfunc;
comp.changeDetectorRef.detectChanges();
组件WallComponent中的dict声明:
private com:{[id:string]:any;} =
{
"loadCommunity" : CommunityComponent
};
尝试运行应用程序时产生以下错误:
当我从CommunityComponent中删除&#34; extends Base&#34; 时,应用程序正常运行。我需要从Base继承组件,并且能够在所提到的字典中获取组件的类型。
有可能实现这个目标吗?
谢谢。