本篇文章主要介绍了angular组件继承的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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: ` 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: `
接下来我们简要讨论一个可能令人困惑的主题，@Component() 中元数据是否允许继承？答案是否定的，子组件是不能继承父组件装饰器中元数据。限制元数据继承，从根本上说，是有道理的，因为我们的元数据用是来描述组件类的，不同的组件我们是需要不同的元数据，如 selector、template 等。Angular 2 组件继承主要还是逻辑层的复用，具体可以先阅读完下面实战的部分，再好好体会一下哈。
现在我们先来实现一个简单的分页组件,simple-pagination.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'simple-pagination', template: ` 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 app.component.ts
相关文章
下面小编就为大家带来一篇angularJs关于指令的一些冷门属性详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
本篇文章主要介绍了详解AngularJS ui-sref的简单使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
本篇文章主要介绍了详解如何在Angular中快速定位DOM元素，非常具有实用价值，需要的朋友可以参考下2017-05-05
AngularJS使用angular-formly进行表单验证
这篇文章主要介绍了AngularJS使用angular-formly进行表单验证的相关资料,需要的朋友可以参考下2015-12-12
AngularJS自带了很多验证，什么必填，最大长度，最小长度...，这里记录几个有用的正则式验证。本文给大家介绍的非常详细，对angularjs中表单验证知识感兴趣的朋友一起学习吧2016-11-11
本篇文章主要介绍了angularJs中datatable实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
利用JavaScript的AngularJS库制作电子名片的方法
这篇文章主要介绍了利用JavaScript的AngularJS库制作电子名片的方法,其中需要使用到HTML5的canvas画布,需要的朋友可以参考下2015-06-06
当Angular项目的规模到达一定的程度，就需要进行测试工作了。为什么要自动化测试？1，提高产出质量。2，减少重构时的痛。反正我最近重构多了，痛苦经历多了。3，便于新人接手。下面这篇文章就给大家详细介绍了Angular.Js的自动化测试，有需要的朋友们可以参考借鉴。2016-12-12
本文通过一段实例代码给大家简单介绍了angularjs模仿form表单提交的方法，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-12-12
本篇文章主要介绍了angularjs使用directive实现分页组件的示例，具有一定的参考价值，有兴趣的可以了解一下。2017-02-02
最新评论