建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹了angular組件繼承如何實現(xiàn)第1/2頁，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
Angular 2.3 版本中引入了組件繼承的功能，該功能非常強大，能夠大大增加我們組件的可復(fù)用性。
組件繼承涉及以下的內(nèi)容：
Metadata：如 @Input()、@Output()、@ContentChild/Children、@ViewChild/Children 等。在派生類中定義的元數(shù)據(jù)將覆蓋繼承鏈中的任何先前的元數(shù)據(jù)，否則將使用基類元數(shù)據(jù)。
Constructor：如果派生類未聲明構(gòu)造函數(shù)，它將使用基類的構(gòu)造函數(shù)。這意味著在基類構(gòu)造函數(shù)注入的所有服務(wù)，子組件都能訪問到。
Lifecycle hooks：如果基類中包含生命周期鉤子，如 ngOnInit、ngOnChanges 等。盡管在派生類沒有定義相應(yīng)的生命周期鉤子，基類的生命周期鉤子會被自動調(diào)用。
需要注意的是，模板是不能被繼承的 ，因此共享的 DOM 結(jié)構(gòu)或行為需要單獨處理。了解詳細(xì)信息，請查看 - properly support inheritance。
接下來我們來快速體驗的組件繼承的功能并驗證以上的結(jié)論，具體示例如下(本文所有示例基于的 Angular 版本是 - 4.0.1)：
exe-base.component.ts
import { Component, ElementRef, Input, HostBinding, HostListener, OnInit } from '@angular/core'; @Component({
selector: 'exe-base', // template will not be inherited template: `
exe-base：我是base組件么? - {{isBase}}
` }) export class BaseComponent implements OnInit { @Input() isBase: boolean = true; @HostBinding('style.color') color = 'blue'; // will be inherited @HostListener('click', ['$event']) // will be inherited onClick(event: Event) { console.log(`I am BaseComponent`);
} constructor(protected eleRef: ElementRef) { }
ngOnInit() { console.dir('BaseComponent：ngOnInit method has been called');
}
}exe-inherited.component.ts
import { Component, HostListener, OnChanges, SimpleChanges } from '@angular/core'; import { BaseComponent } from './exe-base.component'; @Component({
selector: 'exe-inherited',
template: `
exe-inherited：我是base組件么? - {{isBase}}
` }) export class InheritedComponent extends BaseComponent implements OnChanges { @HostListener('click', ['$event']) // overridden onClick(event: Event) { console.log(`I am InheritedComponent`);
}
ngOnChanges(changes: SimpleChanges) { console.dir(this.eleRef); // this.eleRef.nativeElement：exe-inherited }
}app.component.ts
import { Component, OnInit } from '@angular/core'; import {ManagerService} from "./manager.service"; @Component({
selector: 'exe-app',
template: `
` }) export class AppComponent {
currentPage: number = 1;
totalPage: number = 5;
} 接下來我們簡要討論一個可能令人困惑的主題，@Component() 中元數(shù)據(jù)是否允許繼承？答案是否定的，子組件是不能繼承父組件裝飾器中元數(shù)據(jù)。限制元數(shù)據(jù)繼承，從根本上說，是有道理的，因為我們的元數(shù)據(jù)用是來描述組件類的，不同的組件我們是需要不同的元數(shù)據(jù)，如 selector、template 等。Angular 2 組件繼承主要還是邏輯層的復(fù)用，具體可以先閱讀完下面實戰(zhàn)的部分，再好好體會一下哈。
現(xiàn)在我們先來實現(xiàn)一個簡單的分頁組件,simple-pagination.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({
selector: 'simple-pagination',
template: `
Previous
Next
page {{ page }} of {{ pageCount }}
` }) export class SimplePaginationComponent { @Input() pageCount: number; @Input() page: number; @Output() pageChanged = new EventEmitter();
nextPage() { this.pageChanged.emit(++this.page);
}
previousPage() { this.pageChanged.emit(--this.page);
}
hasPrevious(): boolean { return this.page > 1;
}
hasNext(): boolean { return this.page < this.pageCount;
}
} app.component.ts
import { Component, OnInit } from '@angular/core'; import {ManagerService} from "./manager.service"; @Component({
selector: 'exe-app',
template: `
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“angular組件繼承如何實現(xiàn)第1/2頁”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
當(dāng)前題目：angular組件繼承如何實現(xiàn)第1/2頁-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://www.dlmjj.cn/article/iechi.html
