Angular 5中如何判断是否存在历史页面以控制返回按钮显隐

嗨，这个场景我太熟悉了——用Location.back()做返回按钮时，确实会碰到没有上一页却显示按钮的尴尬情况。Angular 5的Location服务本身并没有提供直接判断是否存在上一页的方法，不过我们可以用两种靠谱的方式来解决：

方法一：自己维护导航历史栈（推荐） #

这种方式通过监听路由导航事件，手动记录应用内的页面跳转历史，能精准控制返回按钮的显示状态，不受浏览器外部操作的影响。

实现步骤： #

1. 在组件中注入Router，并引入路由事件和RxJS的filter操作符
2. 初始化一个数组存储导航历史，再用变量标记是否有上一页
3. 订阅路由的NavigationEnd事件，每次页面导航完成时更新历史栈
4. 根据历史栈长度判断是否显示返回按钮，后退后同步更新状态

代码示例： #

import { Component } from '@angular/core';
import { Location } from '@angular/common';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({ 
  selector: 'app-main', 
  templateUrl: './main.component.html', 
  styleUrls: ['./main.component.css'] 
}) 
export class MainComponent { 
  hasPreviousPage = false;
  private navigationHistory: string[] = [];

  constructor( 
    public location: Location,
    private router: Router
  ) { 
    // 监听路由导航完成事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // 处理页面刷新：刷新时历史栈重置，只记录当前页面
      if (this.navigationHistory.length === 0) {
        this.navigationHistory.push(event.urlAfterRedirects);
      } else {
        // 避免同一页面重复导航的情况
        const lastUrl = this.navigationHistory[this.navigationHistory.length - 1];
        if (lastUrl !== event.urlAfterRedirects) {
          this.navigationHistory.push(event.urlAfterRedirects);
        }
      }
      // 历史栈长度大于1，说明存在上一页
      this.hasPreviousPage = this.navigationHistory.length > 1;
    });
  } 

  goBack() { 
    if (this.hasPreviousPage) {
      this.location.back();
      // 后退后更新历史栈和状态
      this.navigationHistory.pop();
      this.hasPreviousPage = this.navigationHistory.length > 1;
    }
  } 
}

模板中用*ngIf控制按钮显示：

<button *ngIf="hasPreviousPage" (click)="goBack()">返回</button>

方法二：利用浏览器的history.length（简单但有局限） #

浏览器的history对象有一个length属性，代表当前会话的历史记录条数。通常初始页面的history.length为1，有页面跳转后会大于1，我们可以利用这个来判断。

代码示例： #

import { Component } from '@angular/core';
import { Location } from '@angular/common';

@Component({ 
  selector: 'app-main', 
  templateUrl: './main.component.html', 
  styleUrls: ['./main.component.css'] 
}) 
export class MainComponent { 
  constructor( public location: Location ) {} 

  // 通过getter动态判断是否有上一页
  get hasPreviousPage(): boolean {
    // history.length > 1 说明存在上一页
    return window.history.length > 1;
  }

  goBack() { 
    if (this.hasPreviousPage) {
      this.location.back();
    }
  } 
}

模板同样使用*ngIf="hasPreviousPage"控制按钮显示。

注意事项： #

这种方法虽然简单，但依赖浏览器全局历史记录，如果用户在当前标签页打开过其他外部页面，history.length的数值可能不准确，更适合对精度要求不高的场景。

内容的提问来源于stack exchange，提问作者Aeseir