angular组件继承的实现方法第1/2页
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了angular组件继承的实现方法第1/2页，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3546字，纯文字阅读大概需要6分钟。
内容图文
Angular 2.3 版本中引入了组件继承的功能，该功能非常强大，能够大大增加我们组件的可复用性。
组件继承涉及以下的内容：
Metadata：如 @Input()、@Output()、@ContentChild/Children、@ViewChild/Children 等。在派生类中定义的元数据将覆盖继承链中的任何先前的元数据，否则将使用基类元数据。
Constructor：如果派生类未声明构造函数，它将使用基类的构造函数。这意味着在基类构造函数注入的所有服务，子组件都能访问到。
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() 中元数据是否允许继承？答案是否定的，子组件是不能继承父组件装饰器中元数据。限制元数据继承，从根本上说，是有道理的，因为我们的元数据用是来描述组件类的，不同的组件我们是需要不同的元数据，如 selector、template 等。Angular 2 组件继承主要还是逻辑层的复用，具体可以先阅读完下面实战的部分，再好好体会一下哈。
现在我们先来实现一个简单的分页组件,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下一页阅读全文
内容总结
以上是互联网集市为您收集整理的angular组件继承的实现方法第1/2页全部内容，希望文章能够帮你解决angular组件继承的实现方法第1/2页所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。