Tôi muốn tạo các phần mở rộng cho một số thành phần đã được triển khai trong Angular 2, mà không phải viết lại chúng gần như hoàn toàn, vì thành phần cơ sở có thể trải qua các thay đổi và mong muốn những thay đổi này cũng được phản ánh trong các thành phần dẫn xuất của nó.
Tôi đã tạo ra ví dụ đơn giản này để cố gắng giải thích rõ hơn các câu hỏi của mình:
Với thành phần cơ bản sau 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);
}
}Bạn có muốn tạo một thành phần phái sinh khác chỉ thay đổi, ví dụ, một hành vi thành phần cơ bản trong trường hợp màu ví dụ 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";
}
}Hoàn thành ví dụ làm việc trong Plunker
Lưu ý: Rõ ràng ví dụ này là đơn giản và có thể được giải quyết nếu không không cần sử dụng tính kế thừa, nhưng nó chỉ nhằm mục đích minh họa vấn đề thực sự.
Như bạn có thể thấy trong quá trình thực hiện thành phần phái sinh app/my-panel.component.ts, phần lớn việc thực hiện đã được lặp lại và phần duy nhất thực sự được kế thừa là class BasePanelComponent, nhưng @Componentvề cơ bản phải được lặp lại hoàn toàn, không chỉ là các phần thay đổi, như selector: 'my-panel'.
Có cách nào để tạo một sự kế thừa đầy đủ theo nghĩa đen của một thành phần Angular2, kế thừa classđịnh nghĩa của các đánh dấu / chú thích, chẳng hạn @Component?
Chỉnh sửa 1 - Yêu cầu tính năng
Yêu cầu tính năng angular2 được thêm vào dự án trên GitHub: Mở rộng / Kế thừa các chú thích thành phần angular2 # 7968
Chỉnh sửa 2 - Yêu cầu đã đóng
Yêu cầu đã bị đóng, vì lý do này , một thời gian ngắn sẽ không biết làm thế nào để hợp nhất trang trí sẽ được thực hiện. Để lại cho chúng tôi không có lựa chọn. Vì vậy, ý kiến của tôi được trích dẫn trong Vấn đề .