Angular 2无法读取属性'原型'未定义的

时间:2017-01-18 14:01:53

标签: angular inheritance components

我有以下代码:

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
   };

尝试运行应用程序时产生以下错误:

enter image description here

当我从CommunityComponent中删除&#34; extends Base&#34; 时,应用程序正常运行。我需要从Base继承组件,并且能够在所提到的字典中获取组件的类型。

有可能实现这个目标吗?

谢谢。

0 个答案:

没有答案