2017-03-07 16 views
2

私は、多くのコンポーネントの青写真のように機能するコンポーネントを持っています。彼らはすべて同じ方法を共有しています。どうすればそれから青写真を作ることができますか?角度 - コンポーネントの青写真

他のすべてのコンポーネントでメソッドを繰り返す必要はありません。私はいくつかの機能を変更する必要がある場合にのみ、メソッドをオーバーライドする必要があります。

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

    loadCollection($event){ 
     ... 
    } 


    loadRecord($event){ 
     ... 
    } 

    createRecord(){ 
     ... 
    } 
} 
+0

Parentクラスを作成し、コンポーネントで拡張することができます。 –

+0

@MadhuRanjanクラスを拡張することは、私が角度を持って見たことではありません。だからわからなかった。私はDIで解決しなければならないと思った。 –

+0

Typescriptで作業している場合は、[継承セクション](https://www.typescriptlang.org/docs/handbook/classes.html)を参照してください。 – crashmstr

答えて

3

ここ

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

希望です!

関連する問題