angular组件继承的实现方法第1/2页
Angular2.3版本中引入了组件继承的功能，该功能非常强大，能够大大增加我们组件的可复用性。
组件继承涉及以下的内容：
Metadata：如@Input()、@Output()、@ContentChild/Children、@ViewChild/Children等。在派生类中定义的元数据将覆盖继承链中的任何先前的元数据，否则将使用基类元数据。
Constructor：如果派生类未声明构造函数，它将使用基类的构造函数。这意味着在基类构造函数注入的所有服务，子组件都能访问到。
Lifecyclehooks：如果基类中包含生命周期钩子，如ngOnInit、ngOnChanges等。尽管在派生类没有定义相应的生命周期钩子，基类的生命周期钩子会被自动调用。
需要注意的是，模板是不能被继承的，因此共享的DOM结构或行为需要单独处理。了解详细信息，请查看-properlysupportinheritance。
接下来我们来快速体验的组件继承的功能并验证以上的结论，具体示例如下(本文所有示例基于的Angular版本是-4.0.1)：
exe-base.component.ts
import{Component,ElementRef,Input,HostBinding,HostListener,OnInit}from'@angular/core';@Component({
selector:'exe-base',//templatewillnotbeinheritedtemplate:`
exe-base：我是base组件么?-{{isBase}}
`})exportclassBaseComponentimplementsOnInit{@Input()isBase:boolean=true;@HostBinding('style.color')color='blue';//willbeinherited@HostListener('click',['$event'])//willbeinheritedonClick(event:Event){console.log(`IamBaseComponent`);
}constructor(protectedeleRef:ElementRef){}
ngOnInit(){console.dir('BaseComponent：ngOnInitmethodhasbeencalled');
}
}
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}}
`})exportclassInheritedComponentextendsBaseComponentimplementsOnChanges{@HostListener('click',['$event'])//overriddenonClick(event:Event){console.log(`IamInheritedComponent`);
}
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:`
`})exportclassAppComponent{
currentPage:number=1;
totalPage:number=5;
}
接下来我们简要讨论一个可能令人困惑的主题，@Component()中元数据是否允许继承？答案是否定的，子组件是不能继承父组件装饰器中元数据。限制元数据继承，从根本上说，是有道理的，因为我们的元数据用是来描述组件类的，不同的组件我们是需要不同的元数据，如selector、template等。Angular2组件继承主要还是逻辑层的复用，具体可以先阅读完下面实战的部分，再好好体会一下哈。
现在我们先来实现一个简单的分页组件,simple-pagination.component.ts
import{Component,Input,Output,EventEmitter}from'@angular/core';@Component({
selector:'simple-pagination',
template:`
Previous
Next
page{{page}}of{{pageCount}}
`})exportclassSimplePaginationComponent{@Input()pageCount:number;@Input()page:number;@Output()pageChanged=newEventEmitter();
nextPage(){this.pageChanged.emit(++this.page);
}
previousPage(){this.pageChanged.emit(--this.page);
}
hasPrevious():boolean{returnthis.page>1;
}
hasNext():boolean{returnthis.page
app.component.ts
import{Component,OnInit}from'@angular/core';import{ManagerService}from"./manager.service";@Component({
selector:'exe-app',
template:`
12下一页阅读全文