각도 - 구성 요소 청사진

많은 구성 요소의 청사진처럼 작동하는 구성 요소가 있습니다. 그들은 모두 같은 방법을 사용합니다. 어떻게 청사진을 만들 수 있습니까?각도 - 구성 요소 청사진

다른 모든 구성 요소에서 메소드를 반복하고 싶지 않습니다. 일부 기능을 변경해야하는 경우에만 메서드를 재정의하려고합니다.

@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

부모 클래스를 만들어 구성 요소에서 확장 할 수 있습니다. –

@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

각도 - 구성 요소 청사진

답변

관련 문제