कोणीय 2 घटक का विस्तार करें लेकिन टेम्पलेट रखें

Question

क्या कोणीय 2 घटकों से विस्तार/उत्तराधिकारी का कोई तरीका है?

मान लें (सादगी के लिए) मेरे पास 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})]) 

इनपुट और आउटपुट को अतिरिक्त तारों की आवश्यकता होगी, इसलिए बहुत सुविधाजनक लेकिन करने योग्य नहीं है।