2016-02-23 41 views
5

Gibt es eine Möglichkeit, von angular2-Komponenten zu erweitern/zu erben?angular2 Komponente erweitern, aber Vorlage beibehalten

Sagen wir (der Einfachheit halber) Ich habe eine Button Komponente. Basierend auf dieser Komponente möchte ich es auf eine RedButton Komponente erweitern, aber benutze die gleiche Vorlage und die gleichen Initialisierungsmethoden, aber ändere nur, was passiert, wenn der Benutzer die Taste drückt. Wie ist das möglich? Hier


ist, was ich versucht, so weit:

button.component.ts

import {Component, View} from 'angular2/core'; 

@Component({ 
    selector : 'my-button' 
}) 
@View({ 
    template : '<button (click)="clicked()">Click</button>' 
}) 
export class ButtonComponent { 

    constructor() { 
    } 

    public clicked(event) { 
     console.log('Base clicked'); 
    } 
} 

redbutton.component.ts

import {Component, View} from 'angular2/core'; 

import {ButtonComponent} from './button.component'; 

@Component({ 
    selector : 'my-redbutton' 
}) 
// typescript complaints here, that RedButton needs a View and template 
export class RedButtonComponent extends ButtonComponent { 

    constructor() { 
     super(); 
    } 

    public clicked(event) { 
     console.log('RED clicked'); 
    } 
} 

app.component.ts

import {Component} from 'angular2/core'; 
import {ButtonComponent} from './button.component'; 
import {RedButtonComponent} from './redbutton.component'; 

@Component({ 
    selector: 'coach-app', 
    directives : [ButtonComponent, RedButtonComponent], 
    template: '<h1>Button Test App</h1><my-button></my-button><my-redbutton></my-redbutton>' 
}) 
export class TestAppComponent { } 

Antwort

1

Das Erweitern von Klassen und Erben der Vorlage wird (derzeit?) Nicht unterstützt. Sie können DI verwenden, um Ihre Komponente zu konfigurieren.

interface ButtonBehavior { 
    component:any; 
    onClick(event); 
} 

class DefaultButtonBehavior implements ButtonBehavior { 
    component:any; 
    onClick(event) { 
    console.log('default button clicked'); 
    } 
} 

class FancyButtonBehavior implements ButtonBehavior { 
    component:any; 
    onClick(event) { 
    console.log('default button clicked'); 
    } 
} 

class ButtonComponent { 
    constructor(private buttonBehavior:ButtonBehavior) { 
    buttonBehavior.component = this. 
    } 
} 

bootstrap(AppComponent, [provide(ButtonBehavior, {useClass: FancyButtonBehavior})]) 

Ein- und Ausgänge würden zusätzliche Verkabelung benötigen, daher nicht zu praktisch, aber machbar.

Verwandte Themen