angular組件繼承的實(shí)現(xiàn)方法第2/2頁(yè)
我們發(fā)現(xiàn) UI 界面風(fēng)格已經(jīng)完全不一樣了，但仔細(xì)想一下組件分頁(yè)的控制邏輯仍可以繼續(xù)使用。Angular 團(tuán)隊(duì)也考慮到了這種場(chǎng)景，因此為我們引入組件繼承的特性，這對(duì)我們開發(fā)者來說，可以大大地提高組件的復(fù)用性。接下來我們來一步步實(shí)現(xiàn)新的分頁(yè)組件，首先先更新 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 {
}
上面代碼中，有幾個(gè)注意點(diǎn)：
首先我們先導(dǎo)入已開發(fā)完的 SimplePaginationComponent 組件類
然后讓我們新定義的 ExePaginationComponent 類繼承于 SimplePaginationComponent 類
接著我們更新頁(yè)面的視圖模板，把按鈕替換為 << 和 >>
我們看到更新的視圖模板，我們?nèi)匀豢梢允褂没?(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';
...
}
注意：
當(dāng)用戶沒有設(shè)置 previousText 輸入屬性值時(shí)，我們使用的默認(rèn)值是 'Previous'
當(dāng)用戶沒有設(shè)置 nextText 輸入屬性值時(shí)，我們使用的默認(rèn)值是 'Next'
對(duì)于 ExePaginationComponent 組件，我們也希望讓用戶自定義 previousText 和 nextText 的值，但它們對(duì)應(yīng)的默認(rèn)值是：'<<' 和 '>>'，這時(shí)我們可以覆蓋 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 中有類的概念，但是可能大多數(shù) JavaScript 程序員并不是非常熟悉類，這里對(duì)類相關(guān)的概念做一個(gè)簡(jiǎn)單的介紹。
類 (Class)：一種面向?qū)ο笥?jì)算機(jī)編程語(yǔ)言的構(gòu)造，是創(chuàng)建對(duì)象的藍(lán)圖，描述了所創(chuàng)建的對(duì)象共同的屬性和方法。
對(duì)象 (Object)：類的實(shí)例，通過 new 創(chuàng)建
面向?qū)ο?(OOP) 的三大特性：封裝、繼承、多態(tài)
封裝 (Encapsulation)：將對(duì)數(shù)據(jù)的操作細(xì)節(jié)隱藏起來，只暴露對(duì)外的接口。外界調(diào)用端不需要知道細(xì)節(jié)，就能通過對(duì)外提供的接口來訪問該對(duì)象，同時(shí)也保證了外界無法任意更改對(duì)象內(nèi)部的數(shù)據(jù)
繼承 (Inheritance)：子類繼承父類，子類除了擁有父類的所有特性外，還可以擴(kuò)展自有的功能特性
多態(tài) (Polymorphism)：由繼承而產(chǎn)生了相關(guān)的不同的類，對(duì)同一個(gè)方法可以有不同的響應(yīng)。比如 Cat 和 Dog 都繼承自 Animal，但是分別實(shí)現(xiàn)了自己的 eat() 方法。此時(shí)針對(duì)某一個(gè)實(shí)例，我們無需了解它是 Cat 還是 Dog，就可以直接調(diào)用 eat() 方法，程序會(huì)自動(dòng)判斷出來應(yīng)該如何執(zhí)行 eat()
存取器（getter & setter）：用于屬性的讀取和賦值
修飾符（Modifiers）：修飾符是一些關(guān)鍵字，用于限定成員或類型的性質(zhì)。比如 public 表示公有屬性或方法
抽象類（Abstract Class）：抽象類是供其他類繼承的基類，抽象類不允許被實(shí)例化。抽象類中的抽象方法必須在子類中被實(shí)現(xiàn)
接口（Interfaces）：不同類之間公有的屬性或方法，可以抽象成一個(gè)接口。接口可以被類實(shí)現(xiàn)（implements）。一個(gè)類只能繼承自另一個(gè)類，但是可以實(shí)現(xiàn)多個(gè)接口。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
