Question

我有一个组件，就像许多组件的蓝图一样。他们都有相同的方法。我怎样才能制作出蓝图呢？

我不想重复所有其他组件中的方法。我只想覆盖一个方法，如果我需要改变一些功能。

@Component({
    template: `
       <datagrid (onRefresh)="loadCollection($event)" (onRowSelect)="loadRecord($event)" (onCreateRecord)="createRecord()"></datagrid>  
    `,
    providers: [CollectionService]
})
export class ListComponent implements OnInit{

    loadCollection($event){
      ...
    }


    loadRecord($event){
      ...
    }

    createRecord(){
      ...
    }
}

Answer 1

尝试以下，

export class BaseComponent { 
  name: string ="";
  someCommonFunction(){
    return `Method called from Base Component from child ${this.name}`
  }
}

@Component({
  selector: 'child-1',
  template: `{{someCommonFunction()}}`
})
export class ChildComponent1 extends BaseComponent {
  constructor(){
    super();
    this.name = "ChildComponent1";
  }      
}

@Component({
  selector: 'child-2',
  template: `{{someCommonFunction()}}`
})
export class ChildComponent2 extends BaseComponent { 
   constructor(){
    super();
    this.name = "ChildComponent2";
  }
}

以下是Plunker!!

希望这会有所帮助!!

角度 - 组件蓝图

1 个答案: