Angular9如何实现从XYZ页面返回ABC页面时隐藏ABC页的返回按钮

核心实现逻辑是：在XYZ页点击返回ABC页时传递特定标识，ABC页收到标识后控制Back按钮的显示隐藏即可，以下是两种常用实现方案：

方案1：使用Angular路由自带状态传递（轻量无依赖，推荐） #

无需额外创建服务，利用Angular路由内置的状态传递能力实现，状态仅在当前会话有效，刷新页面自动重置。

• 步骤1：在ABC组件中定义控制Back按钮显示的变量，模板用*ngIf绑定
  ABC组件代码：

  import { Component, OnInit } from '@angular/core';
  import { NavigationEnd, Router } from '@angular/router';
  import { filter } from 'rxjs/operators';
  
  @Component({
    selector: 'app-abc',
    template: `
      <button *ngIf="showBackBtn">Back</button>
      <button (click)="goToXYZ()">Next</button>
    `
  })
  export class AbcComponent implements OnInit {
    showBackBtn = true;
    constructor(private router: Router) {}
  
    ngOnInit() {
      // 监听导航完成事件，读取路由携带的状态
      this.router.events.pipe(
        filter(event => event instanceof NavigationEnd)
      ).subscribe(() => {
        const navState = this.router.getCurrentNavigation()?.extras.state as any;
        if (navState?.hideBack) {
          this.showBackBtn = false;
          // 可选：清空历史状态，避免刷新页面重复读取旧状态
          history.replaceState({}, document.title);
        } else {
          // 其他场景进入ABC页默认显示Back按钮
          this.showBackBtn = true;
        }
      })
    }
  
    goToXYZ() {
      this.router.navigate(['/xyz']);
    }
  }
  

• 步骤2：XYZ页点击Back按钮返回时携带隐藏标识
  XYZ组件代码：

  import { Component } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-xyz',
    template: `<button (click)="goBackToABC()">Back</button>`
  })
  export class XyzComponent {
    constructor(private router: Router) {}
  
    goBackToABC() {
      // 跳转ABC页时携带隐藏Back按钮的状态
      this.router.navigate(['/abc'], {
        state: { hideBack: true }
      })
    }
  }
  

方案2：使用全局共享服务实现（适合复杂多页面状态管理） #

如果项目需要跨多路由共享状态，可以用全局服务实现：

• 步骤1：创建全局共享服务page-state.service.ts

  import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  export class PageStateService {
    // 标记是否需要隐藏ABC页的Back按钮
    hideABCBackBtn = false;
  }
  

• 步骤2：XYZ页返回前修改服务状态

  constructor(private router: Router, private pageState: PageStateService) {}
  goBackToABC() {
    this.pageState.hideABCBackBtn = true;
    this.router.navigate(['/abc']);
  }
  

• 步骤3：ABC页初始化时读取服务状态，用完重置

  constructor(private pageState: PageStateService) {}
  ngOnInit() {
    if (this.pageState.hideABCBackBtn) {
      this.showBackBtn = false;
      // 用完立即重置，避免下次正常进入ABC页误隐藏按钮
      this.pageState.hideABCBackBtn = false;
    } else {
      this.showBackBtn = true;
    }
  }
  

注意：两种方案都需要提前在路由模块中配置好ABC、XYZ页对应的路由规则。

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