Eu gostaria de criar extensões para alguns componentes já implantados no Angular 2, sem precisar reescrevê-los quase completamente, pois o componente base pode sofrer alterações e desejar que essas alterações também sejam refletidas em seus componentes derivados.
Criei este exemplo simples para tentar explicar melhor minhas perguntas:
Com o seguinte 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);
}
}
Deseja criar outro componente derivativo apenas para alterar, por exemplo, um comportamento básico do componente no caso da cor de exemplo 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";
}
}
Exemplo completo de trabalho no Plunker
Nota: Obviamente, este exemplo é simples e pode ser resolvido caso contrário, não há necessidade de usar herança, mas destina-se apenas a ilustrar o problema real.
Como você pode ver na implementação do componente derivado app/my-panel.component.ts
, grande parte da implementação foi repetida, e a única parte realmente herdada foi a class
BasePanelComponent
, mas @Component
teve que ser basicamente repetida completamente, não apenas as partes alteradas, como a selector: 'my-panel'
.
Existe alguma maneira de fazer uma herança literalmente completa de um componente Angular2, herdando a class
definição das marcações / anotações, como por exemplo @Component
?
Editar 1 - Solicitação de recurso
Solicitação de recurso angular2 adicionado ao projeto no GitHub: Estender / herdar anotações de componentes angular2 # 7968
Editar 2 - Solicitação Encerrada
A solicitação foi encerrada, por esse motivo , que brevemente não saberia como mesclar o decorador. Deixando-nos sem opções. Portanto, minha opinião é citada na edição .