角度 - 組件的藍圖

我有一個組件，它像很多組件的藍圖一樣工作。他們都有相同的方法。我怎樣才能制定一個藍圖呢？我不想重複所有其他組件中的方法。我只想重寫一個方法，如果我需要改變一些功能。角度 - 組件的藍圖

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

    loadCollection($event){ 
     ... 
    } 


    loadRecord($event){ 
     ... 
    } 

    createRecord(){ 
     ... 
    } 
}

來源

2017-03-07 Trevor Hector

您可以創建一個Parent類並將其擴展到您的組件中。 –

@MadhuRanjan擴展類不是我見過的角度。所以我不確定。我以爲我必須用DI解決。 –

如果您正在使用Typescript，請查看[繼承部分]（https://www.typescriptlang.org/docs/handbook/classes.html）。 – crashmstr

下面嘗試，

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

希望這有助於！

來源

2017-03-07 15:17:00

角度 - 組件的藍圖

回答

相關問題