Me gustaría crear extensiones para algunos componentes ya implementados en Angular 2, sin tener que reescribirlos casi por completo, ya que el componente base podría sufrir cambios y desear que estos cambios también se reflejen en sus componentes derivados.
Creé este ejemplo simple para tratar de explicar mejor mis preguntas:
Con el siguiente componente base 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);
}
}
¿Desea crear otro componente derivado solo alterar, por ejemplo, un comportamiento de componente básico en el caso del color de ejemplo 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() {
super();
this.color = "blue";
}
}
Ejemplo de trabajo completo en Plunker
Nota: Obviamente, este ejemplo es simple y podría resolverse; de lo contrario, no es necesario utilizar la herencia, pero solo tiene la intención de ilustrar el problema real.
Como puede ver en la implementación del componente derivado app/my-panel.component.ts
, gran parte de la implementación se repitió, y la única parte realmente heredada fue la class
BasePanelComponent
, pero @Component
básicamente tuvo que repetirse por completo, no solo las porciones cambiadas, como la selector: 'my-panel'
.
¿Hay alguna manera de hacer una herencia literalmente completa de un componente Angular2, heredando la class
definición de las marcas / anotaciones, como por ejemplo @Component
?
Edición 1 - Solicitud de funciones
Solicitud de función angular2 agregada al proyecto en GitHub: Extender / Heredar anotaciones de componentes angular2 # 7968
Edición 2 - Solicitud cerrada
La solicitud se cerró, por este motivo , que brevemente no sabría cómo fusionar el decorador se realizará. Dejándonos sin opciones. Así que mi opinión se cita en el número .