Implementation method of angular component inheritance page 2/2

Implementation method of angular component inheritance page 2/2

We found that the UI interface style is completely different, but if you think about it carefully, you can still use the control logic of component pagination. The Angular team also took this scenario into consideration, so it introduced component inheritance features for us, which can greatly improve component reusability for us developers. Next, we will implement the new paging component step by step. First, update the UI interface, the specific code is as follows:

import { Component } from '@angular/core'; import { SimplePaginationComponent } from './'; @Component({
  selector: 'exe-pagination',
  template: `
  <a (click)="previousPage()" []="!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()" []="!hasNext()"
   href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   »»
  </a>
 ` }) export class ExePaginationComponent extends SimplePaginationComponent {
  
}

There are several points to note in the above code:

First, we first import the developed SimplePaginationComponent component class

Then let's inherit the newly defined ExePaginationComponent class from the SimplePaginationComponent class

Then we update the page's view template and replace the button with << and >>

We see the updated view template, and we can still use all input and output properties defined in the base class (SimplePaginationComponent)

Before continuing to develop the ExePaginationComponent component, let’s update the SimplePaginationComponent component:

@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';
 ...
}

Notice:

When the user does not set the previousText input property value, the default value we use is 'Previous'

When the user does not set the nextText input property value, the default value we use is 'Next'

For the ExePaginationComponent component, we also want to let the user customize the values ​​of previousText and nextText, but their corresponding default values ​​are: '<<' and '>>'. At this time, we can override the input properties of the SimplePaginationComponent component. The specific example is as follows:

import { Component , Input, Output} from '@angular/core'; import { SimplePaginationComponent } from './'; @Component({
  selector: 'exe-pagination',
  template: `
  <a (click)="previousPage()" []="!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()" []="!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 }

The concept of class

Although there is a concept of class in JavaScript, most JavaScript programmers may not be very familiar with classes. Here is a brief introduction to the concepts related to classes.

Class: A construct in an object-oriented computer programming language, which is a blueprint for creating objects, describing common properties and methods of the created objects.

Object: An instance of the class, created through new

Three major features of object-oriented (OOP): encapsulation, inheritance, and polymorphism

Encapsulation: hides the operation details of the data and exposes only external interfaces. The external caller does not need to know the details, so he can access the object through the interface provided to the outside world, and it also ensures that the outside world cannot change the data inside the object at will.

Inheritance: Subclasses inherit the parent class. In addition to having all the features of the parent class, subclasses can also extend their own functional features.

Polymorphism: Different related classes are generated by inheritance, and can have different responses to the same method. For example, Cat and Dog both inherit from Animal, but implement their own eat() methods respectively. At this time, for an instance, we can call the eat() method directly without knowing whether it is Cat or Dog. The program will automatically determine how to execute eat()

Getter & setter: Used for reading and assignment of properties

Modifiers: Modifiers are keywords used to define the nature of members or types. For example, public represents a public property or method

Abstract Class: An abstract class is a base class for inheritance of other classes, and abstract classes are not allowed to be instantiated. Abstract methods in abstract classes must be implemented in subclasses

Interfaces: Public properties or methods between different classes can be abstracted into an interface. Interfaces can be implemented by classes. A class can only inherit from another class, but can implement multiple interfaces.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.