` }) export class App">

angular组件继承的如何实现方法

发布时间：2024-04-07 20:20:14 来源：网络

= "currentPage " [pageCount]= "totalPage ">` }) export class App

="currentPage" [pageCount]="totalPage"></simple-pagination> ` }) export class AppComponent { currentPage: number = 2; totalPage: number = 10; }

我们发现 UI 界面风格已经完全不一样了，但仔细想一下组件分页的控制逻辑仍可以继续使用。Angular 团队也考虑到了这种场景，因此为我们引入组件继承的特性，这对我们开发者来说，可以大大地提高组件的复用性。接下来我们来一步步实现新的分页组件，首先先更新 UI 界面，具体代码如下：

exe-pagination.component.ts

import { Component } from '@angular/core'; import { SimplePaginationComponent } from './simple-pagination.component'; @Component({
  selector: 'exe-pagination',
  template: `
  <a (click)="previousPage()" [class.disabled]="!hasPrevious()" 
   href="javascript：void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   ««
  </a> 
  <span>{{ page }} / {{ pageCount }}</span>
  <a (click)="nextPage()" [class.disabled]="!hasNext()"
   href="javascript：void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   »»
  </a>
 ` }) export class ExePaginationComponent extends SimplePaginationComponent {
  
}

上面代码中，有几个注意点：

首先我们先导入已开发完的 SimplePaginationComponent 组件类

然后让我们新定义的 ExePaginationComponent 类继承于 SimplePaginationComponent 类

接着我们更新页面的视图模板，把按钮替换为 << 和 >>

我们看到更新的视图模板，我们仍然可以使用基类 (SimplePaginationComponent) 中定义的所有输入、输出属性

再继续开发 ExePaginationComponent 组件前，我们先来更新一下 SimplePaginationComponent 组件：

@Component({
 selector: 'simple-pagination',
 template: `
  <button (click)="previousPage()" [disabled]="!hasPrevious()">{{ previousText }}</button> 
  <button (click)="nextPage()" [disabled]="!hasNext()">{{ nextText }}</button>

  <p>page {{ page }} of {{ pageCount }}</p>
 ` }) export class SimplePaginationComponent {
 ... @Input()
 previousText = 'Previous'; @Input()
 nextText = 'Next';
 ...
}

注意：

当用户没有设置 previousText 输入属性值时，我们使用的默认值是 'Previous'

当用户没有设置 nextText 输入属性值时，我们使用的默认值是 'Next'

对于 ExePaginationComponent 组件，我们也希望让用户自定义 previousText 和 nextText 的值，但它们对应的默认值是：'<<' 和 '>>'，这时我们可以覆盖 SimplePaginationComponent 组件的输入属性，具体示例如下：

import { Component , Input, Output} from '@angular/core'; import { SimplePaginationComponent } from './simple-pagination.component'; @Component({
  selector: 'exe-pagination',
  template: `
  <a (click)="previousPage()" [class.disabled]="!hasPrevious()" 
   href="javascript：void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   ««
  </a> 
  <span>{{ page }} / {{ pageCount }}</span>
  <a (click)="nextPage()" [class.disabled]="!hasNext()"
   href="javascript：void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   »»
  </a>
 ` }) export class ExePaginationComponent extends SimplePaginationComponent { @Input() previousText = '<<'; // override default text @Input() nextText = '>>'; // override default text }

类的概念

虽然 JavaScript 中有类的概念，但是可能大多数 JavaScript 程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。

类 (Class)：一种面向对象计算机编程语言的构造，是创建对象的蓝图，描述了所创建的对象共同的属性和方法。

对象 (Object)：类的实例，通过 new 创建

面向对象 (OOP) 的三大特性：封装、继承、多态

封装 (Encapsulation)：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据

继承 (Inheritance)：子类继承父类，子类除了拥有父类的所有特性外，还可以扩展自有的功能特性

多态 (Polymorphism)：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat() 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat() 方法，程序会自动判断出来应该如何执行 eat()

存取器（getter & setter）：用于属性的读取和赋值

修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法

抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现

接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好代码网。

以下您可能有感兴趣的文章:

标签： angular 组件继承