Я хотел бы создать расширения для некоторых компонентов, уже развернутых в Angular 2, без необходимости переписывать их почти полностью, поскольку базовый компонент может претерпеть изменения, и хотел бы, чтобы эти изменения также были отражены в его производных компонентах.
Я создал этот простой пример, чтобы попытаться лучше объяснить мои вопросы:
Со следующим базовым компонентом 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);
}
}
Хотите ли вы создать еще один производный компонент, изменив, например, базовое поведение компонента в случае с примером цвета, 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";
}
}
Полный рабочий пример в Plunker
Примечание: очевидно, этот пример прост и может быть решен, иначе нет необходимости использовать наследование, но он предназначен только для иллюстрации реальной проблемы.
Как вы можете видеть в реализации производного компонента app/my-panel.component.ts, большая часть реализации была повторена, и единственной частью, которая действительно была унаследована, был class BasePanelComponent, но @Component пришлось в основном полностью повторить, не только измененные части, как selector: 'my-panel'.
Есть ли способ сделать буквально полное наследование компонента Angular2, наследуя определение class маркировки/аннотации, как, например, @Component?
Изменить 1 - Запрос функции
В проект на GitHub добавлен запрос на добавление angular2: аннотации компонентов Extend/Inherit angular2 # 7968
Редактировать 2 - Закрытый запрос
Запрос был закрыт, по этой причине, что в течение короткого времени не будет известно, как объединить декоратор будет сделано. Оставив нас без вариантов. Так что мое мнение цитируется в выпуске.