angular组件继承的实现方法
前端之家收集整理的这篇文章主要介绍了
angular组件继承的实现方法，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_403_0@Angular 2.3 版本中引入了组件继承的功能，该功能非常强大，能够大大增加我们组件的可复用性。
@H_
403_0@组件继承涉及以下的
内容：
@H_
403_0@
Metadata：如 @Input()、@Output()、@ContentChild/Children、@ViewChild/Children 等。在派生类中定义的元数据将覆盖继承链中的任何先前的元数据，否则将使用基类元数据。
@H_
403_0@Constructor：如果派生类未声明构造
函数，它将使用基类的构造
函数。这意味着在基类构造
函数注入的所有服务，子组件都能访问到。
@H_
403_0@Lifecycle hooks：如果基类中包含生命周期钩子，如 ngOnInit、ngOnChanges 等。尽管在派生类没有定义相应的生命周期钩子，基类的生命周期钩子会被
自动调用。
@H_
403_0@需要注意的是，模板是不能被继承的 ，因此共享的 DOM 结构或行为需要单独处理。了解详细信息，请查看 - properly support inheritance。
@H_
403_0@接下来我们来
快速体验的组件继承的
功能并验证以上的结论，具体示例如下(本文所有示例基于的 Angular 版本是 - 4.0.1)：
@H_
403_0@exe-base.component.ts
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');
}
}
@H_
403_0@exe-inherited.component.ts
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 }
}
@H_
403_0@app.component.ts
` }) export class AppComponent {
currentPage: number = 1;
totalPage: number = 5;
}
@H_
403_0@接下来我们简要讨论一个可能令人困惑的
主题，@Component() 中元数据是否允许继承？答案是否定的，子组件是不能继承父组件装饰器中元数据。限制元数据继承，从根本上说，是有道理的，因为我们的元数据用是来描述组件类的，不同的组件我们是需要不同的元数据，如 selector、template 等。Angular 2 组件继承主要还是逻辑层的复用，具体可以先阅读完下面实战的部分，再好好体会一下哈。
@H_
403_0@现在我们先来实现一个简单的
分页组件,simple-pagination.component.ts
IoUsPage()" [disabled]="!hasPrev
IoUs()">Prev
IoUs
@H_
403_0@app.component.ts
` }) export class AppComponent {
currentPage: number = 2;
totalPage: number = 10;
}
@H_
403_0@我们发现 UI 界面风格已经完全不一样了，但仔细想一下组件
分页的控制逻辑仍可以继续使用。Angular 团队也考虑到了这种场景，因此为我们引入组件继承的特性，这对我们开发者来说，可以大大地提高组件的复用性。接下来我们来一步步实现新的
分页组件，首先先更新 UI 界面，具体
代码如下：
@H_
403_0@exe-pagination.component.ts
««
{{ page }} / {{ pageCount }}
»»
` }) export class ExePaginationComponent extends SimplePaginationComponent {
}
@H_
403_0@上面
代码中，有几个注意点：
@H_
403_0@首先我们先导入已开发完的 SimplePaginationComponent 组件类
@H_
403_0@然后让我们新定义的 ExePaginationComponent 类继承于 SimplePaginationComponent 类
@H_
403_0@接着我们更新
页面的视图模板，把按钮替换为 << 和 >>
@H_
403_0@我们看到更新的视图模板，我们仍然可以使用基类 (SimplePaginationComponent) 中定义的所有输入、
输出属性
@H_
403_0@再继续开发 ExePaginationComponent 组件前，我们先来更新一下 SimplePaginationComponent 组件：
IoUsPage()" [disabled]="!hasPrev
IoUs()">{{ prev
IoUsText }}
@H_
403_0@注意：
@H_
403_0@当
用户没有设置 prev
IoUsText 输入
属性值时，我们使用的默认值是 'Prev
IoUs'
@H_
403_0@当
用户没有设置 nextText 输入
属性值时，我们使用的默认值是 'Next'
@H_
403_0@对于 ExePaginationComponent 组件，我们也希望让
用户自定义 prev
IoUsText 和 nextText 的值，但它们对应的默认值是：'<<' 和 '>>'，这时我们可以覆盖 SimplePaginationComponent 组件的输入
属性，具体示例如下：
««
{{ page }} / {{ pageCount }}
»»
` }) export class ExePaginationComponent extends SimplePaginationComponent { @Input() prev
IoUsText = '<<'; // override default text @Input() nextText = '>>'; // override default text }
@H_
403_0@类的概念
@H_
403_0@虽然 JavaScript 中有类的概念，但是可能大多数 JavaScript 程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。
@H_
403_0@类 (Class)：一种面向对象计算机编程语言的构造，是创建对象的蓝图，描述了所创建的对象共同的
属性和
方法。
@H_
403_0@对象 (Object)：类的实例，通过 new 创建
@H_
403_0@面向对象 (OOP) 的三大特性：封装、继承、多态
@H_
403_0@封装 (Encapsulation)：将对数据的操作细节隐藏起来，只暴露对外的接口。外界
调用端不需要知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
@H_
403_0@继承 (Inheritance)：子类继承
父类，子类除了拥有
父类的所有特性外，还可以扩展自有的
功能特性
@H_
403_0@多态 (Polymorphism)：由继承而产生了相关的不同的类，对同一个
方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat()
方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接
调用 eat()
方法，程序会
自动判断出来应该如何执行 eat()
@H_
403_0@存取器（getter & setter）：用于
属性的读取和赋值
@H_
403_0@修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有
属性或
方法
@H_
403_0@抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象
方法必须在子类中被实现
@H_
403_0@接口（Interfaces）：不同类之间公有的
属性或
方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口。
@H_
403_0@以上就是本文的全部
内容，希望对大家的学习有所帮助，也希望大家多多
支持编程之家。
