Neutrino's Blog

前言

Angular 2.3 最近發布，而最有特色的部分莫過於組件繼承 (Component Inheritance) 的部分了。如同類別可以繼承一般，組件繼承可以讓程式碼變得更加強大且更有重複使用性。
所以組件繼承帶來甚麼？

概觀

Component Inheritance 包含了：

• Metadata (decorator): 定義在衍伸的類別的 metadata 像是 @Input、@Output 等，會覆蓋先前所有在繼承鏈裡面的 metadata，不然則採用基本的類別 (父類別) 的 metadata。
• Constructor: 如果衍伸類別沒有 constructure，會採用基本類別的。意思就是說所以注入到 parent constructure 的服務會被 child constructure 繼承。
• Lifecycle hooks: 生命週期鉤子像是 ngOnInit、ngOnChanges會被呼叫，就算他們在衍伸類別沒有被定義。

組件繼承不包括 template 和 style。任何被分享的 DOM 或是行為都會被分別的處理。

藍圖

接著要實際做組件繼承了，想像今天有個組件是用來做「分頁」，你很喜歡它的樣子，功能也達到你的期望，所以你想要使用它，但你想要用自己的風格。
可以先看看 Plunker 完成後的樣子。

原本的組件

我們改的組件

我們將改變：

• 按鈕變成連結
• 頁數顯示改變

動工

原本的組件長這樣

// simple-pagination.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({

selector: 'simple-pagination',

template: `

<button (click)="previousPage()" [disabled]="!hasPrevious()">Previous</button>

<button (click)="nextPage()" [disabled]="!hasNext()">Next</button>
&lt;p&gt;page {{ page }} of {{ pageCount }}&lt;/p&gt;

`

})

export class SimplePaginationComponent {

@Input()

pageCount: number;
@Input()

page: number;
@Output()

pageChanged = new EventEmitter<number>();
nextPage() {

this.page ++;

this.pageChanged.emit(this.page);

}
previousPage() {

this.page --;

this.pageChanged.emit(this.page);

}
hasPrevious(): boolean { return +this.page > 1; }
hasNext(): boolean { return +this.page < +this.pageCount; }
}

一切盡在 code 裡。用到兩個@Input來呈現當前頁面與總頁面數。每次頁面變換都會觸發 pageChanged 事件。當達到最前面或最後面的時候，將按鈕鎖住。

現在我們改一些程式碼，變成新的組件，但是用繼承的方式。

// my-pagination.component.ts
import { Component } from '@angular/core';

import { SimplePaginationComponent } from './simple-pagination.component';
@Component({

selector: 'my-pagination',

template:     <a (click)="previousPage()" [class.disabled]="!hasPrevious()"        href="javascript:void(0)">       ««     </a>      <span>{{ page }} / {{ pageCount }}</span>     <a (click)="nextPage()" [class.disabled]="!hasNext()"       href="javascript:void(0)" >       »»     </a>  

})

export class MyPaginationComponent extends SimplePaginationComponent {

}

首先，我們引入 SimplePaginationComponent，接著 extends (延伸)SimplePaginationComponent。然後我們改變模板，變成用超連結的方式顯示頁碼。然後可以看到我們將 SimplePaginationComponent 裡面的 inputs、outputs 和 function 都用在我們的新模板中了。

覆蓋 Parents' 的特性

原來組件長這樣

// simple-pagination.component.ts
@Component({

selector: 'simple-pagination',

template: `

<button (click)="previousPage()" [disabled]="!hasPrevious()">{{ previousText }}</button>

<button (click)="nextPage()" [disabled]="!hasNext()">{{ nextText }}</button>
&lt;p&gt;page {{ page }} of {{ pageCount }}&lt;/p&gt;

`

})

export class SimplePaginationComponent {

…
@Input()

previousText = 'Previous';
@Input()

nextText = 'Next';
…
}

現在我不想要 previousText 和 nextText 裡面的樣子，在我們建立的繼承組件中，我們可以直接重寫，就可以覆蓋掉他們，而沒動的地方則是繼續繼承。

// my-pagination.component.ts
…

…
export class MyPaginationComponent extends SimplePaginationComponent {

@Input()

previousText = '<<'; // 覆蓋原本的文字
@Input()

nextText = '>>'; // 覆蓋原本的文字
…

}

Child 加入新特性

那我們想要在繼承的組件中增加東西怎麼辦？
只要在原本的組件上面先定義好我們要的特性，但是不使用它，然後在繼承的組件上加上 @Input，這樣繼承的組件之後就可以直接用定義過的特性來改變了！

 // my-pagination.component.ts
@Component({
…
export class MyPaginationComponent extends SimplePaginationComponent {

@Input()

title: string; // 只用來改 child component
…

}