element Angular2 extend, ale zachowaj szablon

Question

Czy istnieje sposób na rozszerzenie/dziedziczenie z elementów kątowych2?

Załóżmy (dla uproszczenia), że mam komponent Button. Na podstawie tego komponentu chcę rozszerzyć go do komponentu RedButton, ale użyć tego samego szablonu i metod inicjowania, ale zmienić tylko to, co dzieje się, gdy użytkownik naciśnie przycisk. Jak to jest możliwe?

---

Oto, co starałem dotąd:

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 { } 

Answer 1

Rozszerzanie klas i dziedziczenie szablonu jest (obecnie?) Nieobsługiwane. Możesz użyć DI, aby skonfigurować swój komponent.

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})]) 

Dane wejściowe i wyjściowe wymagałyby dodatkowego okablowania, dlatego nie są zbyt wygodne, ale można je wykonać.