基本コンポーネントは変更される可能性があり、これらの変更が派生コンポーネントにも反映されることを望んでいるため、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);
}
}
あなたは、例えばのみALTER派生する別の成分、例えば、色の場合の基本的なコンポーネントの動作を作成したいと思います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";
}
}
注:明らかに、この例は単純であり、解決しないと継承を使用する必要はありませんが、実際の問題を説明することのみを目的としています。
あなたが派生コンポーネントの実装に見ることができるようにapp/my-panel.component.ts
、実装の多くは繰り返し、そして実際に継承された単一の部分はあったclass
BasePanelComponent
が、@Component
として、基本的には完全に繰り返されるだけでなく、変更された部分でなければなりませんでしたselector: 'my-panel'
。
たとえば、コンポーネントAngular2を文字通り完全に継承しclass
、マーキング/アノテーションの定義を継承する方法はあり@Component
ますか?
編集1-機能のリクエスト
GitHubのプロジェクトに追加された機能リクエストangular2:拡張/継承angular2コンポーネントアノテーション#7968
編集2-終了したリクエスト
この理由により、デコレータをマージする方法が簡単にわからないというリクエストはクローズされます。オプションなしで私たちを残します。だから私の意見は問題に引用されています。