angular組件繼承的實現方法第2/2頁
我們發(fā)現 UI 界面風格已經完全不一樣了，但仔細想一下組件分頁的控制邏輯仍可以繼續(xù)使用。Angular 團隊也考慮到了這種場景，因此為我們引入組件繼承的特性，這對我們開發(fā)者來說，可以大大地提高組件的復用性。接下來我們來一步步實現新的分頁組件，首先先更新 UI 界面，具體代碼如下：
exe-pagination.component.ts
import { Component } from '@angular/core'; import { SimplePaginationComponent } from './simple-pagination.component'; @Component({
selector: 'exe-pagination',
template: `
<a (click)="previousPage()" [class.disabled]="!hasPrevious()"
href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
««
</a>
<span>{{ page }} / {{ pageCount }}</span>
<a (click)="nextPage()" [class.disabled]="!hasNext()"
href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
»»
</a>
` }) export class ExePaginationComponent extends SimplePaginationComponent {
}
上面代碼中，有幾個注意點：
首先我們先導入已開發(fā)完的 SimplePaginationComponent 組件類
然后讓我們新定義的 ExePaginationComponent 類繼承于 SimplePaginationComponent 類
接著我們更新頁面的視圖模板，把按鈕替換為 << 和 >>
我們看到更新的視圖模板，我們仍然可以使用基類 (SimplePaginationComponent) 中定義的所有輸入、輸出屬性
再繼續(xù)開發(fā) ExePaginationComponent 組件前，我們先來更新一下 SimplePaginationComponent 組件：
@Component({
selector: 'simple-pagination',
template: `
<button (click)="previousPage()" [disabled]="!hasPrevious()">{{ previousText }}</button>
<button (click)="nextPage()" [disabled]="!hasNext()">{{ nextText }}</button>
<p>page {{ page }} of {{ pageCount }}</p>
` }) export class SimplePaginationComponent {
... @Input()
previousText = 'Previous'; @Input()
nextText = 'Next';
...
}
注意：
當用戶沒有設置 previousText 輸入屬性值時，我們使用的默認值是 'Previous'
當用戶沒有設置 nextText 輸入屬性值時，我們使用的默認值是 'Next'
對于 ExePaginationComponent 組件，我們也希望讓用戶自定義 previousText 和 nextText 的值，但它們對應的默認值是：'<<' 和 '>>'，這時我們可以覆蓋 SimplePaginationComponent 組件的輸入屬性，具體示例如下：
import { Component , Input, Output} from '@angular/core'; import { SimplePaginationComponent } from './simple-pagination.component'; @Component({
selector: 'exe-pagination',
template: `
<a (click)="previousPage()" [class.disabled]="!hasPrevious()"
href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
««
</a>
<span>{{ page }} / {{ pageCount }}</span>
<a (click)="nextPage()" [class.disabled]="!hasNext()"
href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
»»
</a>
` }) export class ExePaginationComponent extends SimplePaginationComponent { @Input() previousText = '<<'; // override default text @Input() nextText = '>>'; // override default text }
類的概念
雖然 JavaScript 中有類的概念，但是可能大多數 JavaScript 程序員并不是非常熟悉類，這里對類相關的概念做一個簡單的介紹。
類 (Class)：一種面向對象計算機編程語言的構造，是創(chuàng)建對象的藍圖，描述了所創(chuàng)建的對象共同的屬性和方法。
對象 (Object)：類的實例，通過 new 創(chuàng)建
面向對象 (OOP) 的三大特性：封裝、繼承、多態(tài)
封裝 (Encapsulation)：將對數據的操作細節(jié)隱藏起來，只暴露對外的接口。外界調用端不需要知道細節(jié)，就能通過對外提供的接口來訪問該對象，同時也保證了外界無法任意更改對象內部的數據
繼承 (Inheritance)：子類繼承父類，子類除了擁有父類的所有特性外，還可以擴展自有的功能特性
多態(tài) (Polymorphism)：由繼承而產生了相關的不同的類，對同一個方法可以有不同的響應。比如 Cat 和 Dog 都繼承自 Animal，但是分別實現了自己的 eat() 方法。此時針對某一個實例，我們無需了解它是 Cat 還是 Dog，就可以直接調用 eat() 方法，程序會自動判斷出來應該如何執(zhí)行 eat()
存取器（getter & setter）：用于屬性的讀取和賦值
修飾符（Modifiers）：修飾符是一些關鍵字，用于限定成員或類型的性質。比如 public 表示公有屬性或方法
抽象類（Abstract Class）：抽象類是供其他類繼承的基類，抽象類不允許被實例化。抽象類中的抽象方法必須在子類中被實現
接口（Interfaces）：不同類之間公有的屬性或方法，可以抽象成一個接口。接口可以被類實現（implements）。一個類只能繼承自另一個類，但是可以實現多個接口。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
