Angular -元件蓝图

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!!

希望这能有所帮助！！