Je voudrais créer des extensions pour certains composants déjà déployés dans Angular 2, sans avoir à les réécrire presque complètement, car le composant de base pourrait subir des modifications et souhaiter que ces modifications soient également reflétées dans ses composants dérivés.
J'ai créé cet exemple simple pour essayer de mieux expliquer mes questions:
Avec le composant de base suivant 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);
}
}
Voulez - vous que créer un autre composant dérivé alter, par exemple, un comportement des composants de base dans le cas de la couleur par exemple, 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";
}
}
Exemple de travail complet dans Plunker
Remarque: évidemment, cet exemple est simple et pourrait être résolu sinon pas besoin d'utiliser l'héritage, mais il ne vise qu'à illustrer le vrai problème.
Comme vous pouvez le voir dans l'implémentation du composant dérivé app/my-panel.component.ts
, une grande partie de l'implémentation a été répétée, et la seule partie réellement héritée était le class
BasePanelComponent
, mais il @Component
fallait essentiellement répéter complètement, pas seulement les parties modifiées, comme le selector: 'my-panel'
.
Existe-t-il un moyen de faire un héritage littéralement complet d'un composant Angular2, en héritant de la class
définition des marquages / annotations, comme par exemple @Component
?
Modifier 1 - Demande de fonctionnalité
Demande de fonctionnalité angular2 ajoutée au projet sur GitHub: Extend / Inherit angular2 components annotations # 7968
Modifier 2 - Demande fermée
La demande a été fermée, pour cette raison , que brièvement ne sauraient pas comment fusionner le décorateur sera faite. Nous laissant sans options. Mon opinion est donc citée dans le numéro .