angular2擴展組件但保留模板

Question

有沒有辦法從angular2組件擴展/繼承？

讓我們說（為了簡單起見）我有一個Button組件。 基於此組件，我想將其擴展為RedButton組件，但使用相同的模板和初始化方法，但只更改用戶按下按鈕時發生的情況。 這怎么可能？

---

這是我到目前為止嘗試的內容：

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

擴展類和繼承模板（目前？）不受支持。 您可以做的是使用DI來配置您的組件。

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

輸入和輸出需要額外的布線，因此不太方便但可行。