The project needs to develop a forward and backward button component similar to the bottom when wechat opens a web page. It can determine whether the button is forward and backward according to the location of the route stack, and change the corresponding color of the button, which requires making a page stack.

The idea is to know the number of pages in the browser page history through the history.length attribute of HTML5, and at the same time listen to the router of angualr to get the route of the current page and add it to its own page stack.

1. When entering the page, first determine whether the route exists in the page stack, and push it if not.

2. When the number of routes in the stack exceeds the length of the browser history stack, the redundant pages will be deleted, so as to ensure that the page stack is always the same as that of the browser.

3. Get the location of the current route in the page stack, and change the style of the page elements by index and stack length.

The detailed implementation process is as follows:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-foot',
  templateUrl: './foot.component.html',
  styleUrls: ['./foot.component.scss']
})
export class FootComponent implements OnInit {
  routerArr = [];  //Page stack
  routerPath = ''; //Current routing
  idx = 0;         //Current route index

  constructor(
    private route: Router
  ) {
    // When the application is opened, judge that the history stack length is 1, and then clear the page stack in the cache
    if (history.length == 1) {
      localStorage.removeItem("routerArr");
    }
    let storageRouter = JSON.parse(localStorage.getItem("routerArr"));
    storageRouter ? this.routerArr = storageRouter : '';
    // Monitor page routing changes
    this.route.events.subscribe((data) => {
      //After route navigation
      if (data instanceof NavigationEnd) {
        // Current page routing
        this.routerPath = data.url.substr(1);
        if (this.routerPath == "") {
          this.routerPath = "home";
        }
        // Add new route to page stack
        if (!this.routerArr.includes(this.routerPath)) {
          this.routerArr.push(this.routerPath);
          //If the page stack length exceeds the browser history stack length, delete the page between the previous bit of the history length and the new page
          if (this.routerArr.length > history.length) {
            this.routerArr.splice(history.length - 1, this.routerArr.length - history.length);
          }
        }
        // Index of current route in page stack
        this.idx = this.routerArr.indexOf(this.routerPath) + 1;
        localStorage.setItem("routerArr", JSON.stringify(this.routerArr));
      }
    })
  }
  ngOnInit() {}
  // Back off
  goBack() {
    history.go(-1);
  }
  // Forward
  goAhead() {
    history.go(1);
  }
}