angular組件繼承的實現(xiàn)方法第1/2頁

更新時間：2018年02月26日 14:27:28 作者：阿踏

本篇文章主要介紹了angular組件繼承的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Angular 2.3 版本中引入了組件繼承的功能，該功能非常強大，能夠大大增加我們組件的可復用性。

組件繼承涉及以下的內容：

Metadata：如 @Input()、@Output()、@ContentChild/Children、@ViewChild/Children 等。在派生類中定義的元數(shù)據(jù)將覆蓋繼承鏈中的任何先前的元數(shù)據(jù)，否則將使用基類元數(shù)據(jù)。

Constructor：如果派生類未聲明構造函數(shù)，它將使用基類的構造函數(shù)。這意味著在基類構造函數(shù)注入的所有服務，子組件都能訪問到。

Lifecycle hooks：如果基類中包含生命周期鉤子，如 ngOnInit、ngOnChanges 等。盡管在派生類沒有定義相應的生命周期鉤子，基類的生命周期鉤子會被自動調用。

需要注意的是，模板是不能被繼承的，因此共享的 DOM 結構或行為需要單獨處理。了解詳細信息，請查看 - properly support inheritance。

接下來我們來快速體驗的組件繼承的功能并驗證以上的結論，具體示例如下(本文所有示例基于的 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: `
  <div>
    exe-base：我是base組件么? - {{isBase}}
  </div>
 ` }) 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: `
  <div>
   exe-inherited：我是base組件么? - {{isBase}}
  </div>
 ` }) 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: `
  <exe-base></exe-base>
  <hr/>
  <exe-inherited [isBase]="false"></exe-inherited>
 ` }) export class AppComponent {
 currentPage: number = 1;
 totalPage: number = 5;
}

接下來我們簡要討論一個可能令人困惑的主題，@Component() 中元數(shù)據(jù)是否允許繼承？答案是否定的，子組件是不能繼承父組件裝飾器中元數(shù)據(jù)。限制元數(shù)據(jù)繼承，從根本上說，是有道理的，因為我們的元數(shù)據(jù)用是來描述組件類的，不同的組件我們是需要不同的元數(shù)據(jù)，如 selector、template 等。Angular 2 組件繼承主要還是邏輯層的復用，具體可以先閱讀完下面實戰(zhàn)的部分，再好好體會一下哈。

現(xiàn)在我們先來實現(xiàn)一個簡單的分頁組件,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>
    <p>page {{ page }} of {{ pageCount }} </p>
  ` }) export class SimplePaginationComponent { @Input() pageCount: number; @Input() page: number; @Output() pageChanged = new EventEmitter<number>();

  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: `
  <simple-pagination 
                            12下一頁閱讀全文
                            
                                您可能感興趣的文章:AngularJS中controller控制器繼承的使用方法
深入理解Angular.JS中的Scope繼承
詳解angular中的作用域及繼承
AngularJS的ng-repeat指令與scope繼承關系實例詳解
AngularJS深入探討scope，繼承結構，事件系統(tǒng)和生命周期
Angularjs使用directive自定義指令實現(xiàn)attribute繼承的方法詳解
AngularJS控制器繼承自另一控制器