Doubt
I would like to create extensions for some components already implemented in Angular 2, without having to rewrite them almost completely, because the base component could undergo changes and I would like these changes to be reflected also in their derived components.
Example
I created this simple example to try to better expose my doubts:
With the following base component app/base-panel.component.ts
:
import {Component, Input} from 'angular2/core';
@Component({
selector: 'base-panel',
template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>',
styles: ['
.panel{
padding: 50px;
}
']
})
export class BasePanelComponent {
@Input() content: string;
color: string = "red";
onClick(event){
console.log("Click color: " + this.color);
}
}
I would like to create another derived component that would only change, for example, a behavior of the base component, in the case of example the color, app/my-panel.component.ts
:
import {Component} from 'angular2/core';
import {BasePanelComponent} from './base-panel.component'
@Component({
selector: 'my-panel',
template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>',
styles: ['
.panel{
padding: 50px;
}
']
})
export class MyPanelComponent extends BasePanelComponent{
constructor(){
this.color = "blue";
}
}
Full and functional example in Plunker.
Note: Obviously this example is simple and could be solved in another way without needing to use inheritance, but it is only intended to illustrate the real problem.
Problem
As you can see from the implementation of the derived component app/my-panel.component.ts
, much of the implementation was repeated, and the only part actually inherited was class
BasePanelComponent
, but @Component
had to be basically repeated completely, and not just the changed parts, such as o selector: 'my-panel'
.
Question
To some way to make a literally complete inheritance of an Angular component2, inheriting the definitions of class
and markings / annotations, such as @Component
?
Edit 1 - Resource Request
Request functionality added to the angular2 project in GitHub: Extend / Inherit angular2 components annotations # 7968
p>
Edit 2 - Closed Request
The request has been closed, for that reason , which in brief would be not knowing how it will be done the blending of the decorator. Leaving us with no options. So my opinion is quoted in Issue , which in Portuguese would look something like:
"If Decorator / Annotation has these limitations, which according to their arguments can not easily be circumvented in the library, I ask you: Why use them? which would not be a better option ignore them / discard them for developing a library of the size and complexity of angular2? Or claiming to invest time / money in a library with primary limitations like the one listed in this issue? I believe this is still the time for large changes that can change angular direction2, since the library is still in RC1. It would be extremely disappointing to see a stable version of a library as angular2 being released with this kind of limitation. "