Dúvida
Gostaria de criar extensões para alguns componentes já implementados em Angular 2, sem ter que reescreve-los quase que completamente, pois o componente base podia sofre alterações e gostaria que essas alterações fossem refletidas também em seus componentes derivados.
Exemplo
Criei este exemplo simples para tentar expor melhor minha duvida:
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);
}
}
Gostaria de criar um outro componente derivado que alteraria apenas, por exemplo, um comportamento do componente base, no caso do exemplo a cor, 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";
}
}
Exemplo completo e funcional no Plunker.
Obs: Obviamente este exemplo é simples e poderia ser resolvido de outra forma sem necessitar utilizar herança, mas ele tem como finalidade apenas ilustrar o problema real.
Problema
Como podem ver na implementação do componente derivado app/my-panel.component.ts
, grande parte da implementação foi repetida, e o unica parte realmente herdada foi a class
BasePanelComponent
, mas o @Component
teve que ser basicamente repetido completamente, e não apenas as partes alteradas, como o selector: 'my-panel'
.
Pergunta
A alguma forma de fazer uma herança literalmente completa de um componente Angular2, herdando as definições da class
e das marcações/anotações, como por exemplo o @Component
?
Edit 1 - Solicitação de recurso
Solicitação de funcionalidade adicionada ao projeto do angular2 no GitHub: Extend/Inherit angular2 components annotations #7968
Edit 2 - Solicitação Fechada
A solicitação foi fechada, por esse motivo, que resumidamente seria não saber como será feita a mesclagem dos decorator. Nos deixando sem opções. Então minha opinião é está citada na Issue, que em português seria algo como:
"Se Decorator/Annotation tem essas limitações, que segundo seus argumentos não pode ser facilmente contornadas na biblioteca, lhe faço um questionamento: Por que utiliza-los? Será que não seria uma melhor opção ignora-las/descarta-las para o desenvolvimento uma biblioteca do tamanho e complexidade do angular2? Ou pretendente investir tempo/dinheiro em uma biblioteca com limitações primarias como a listada nesta issue? Acredito que este ainda é o momento para grandes mudanças que podem alterar o rumo de angular2, pois a biblioteca ainda esta em RC1. Seria extremamente decepcionante ver uma versão estável de uma biblioteca como angular2 ser lançada com esse tipo de limitação.".
Component
child (podendo ter mais de umComponent
child dentro de um mesmoComponent
parent), digamos assim, que consiga alterar alguma propriedade de seuComponent
parent (1Component
parent para muitosComponent
_child_). Seria isso?