如何在Angular 15项目中实现可动态复用的返回按钮组件？

问题根源 #

你之前的写法是在父组件中绑定goBack('/')，但这个方法定义在返回按钮组件内部，父组件根本访问不到，所以点击事件无法触发。要实现组件自处理回退逻辑，只需要让组件自己管理路由回退操作即可。

解决方案 #

我们可以利用Angular的Location服务（来自@angular/common）来实现浏览器历史回退，无需手动传入固定路径，完全动态返回上一页。

1. 修改返回按钮组件的TS文件

import { Component } from '@angular/core';
import { Location } from '@angular/common'; // 导入Location服务

@Component({
  selector: 'app-back-button',
  templateUrl: './back-button.component.html',
  styleUrls: ['./back-button.component.css']
})
export class BackButtonComponent {
  constructor(private location: Location) {} // 注入Location服务

  // 组件内部实现回退方法，无需参数
  goBack(): void {
    this.location.back();
  }
}

注：这里去掉了OnInit，因为没有初始化逻辑需要执行，简化代码。

2. 修改组件模板（绑定组件自身的goBack方法）

<button mat-raised-button color="primary" class="centered-button" (click)="goBack()">
  <mat-icon>reply</mat-icon>
  <span class="button-text">Back</span>
</button>

3. 在页面中使用组件

现在你只需要在任意页面直接引入组件即可，不需要额外绑定事件：

<div>
  <app-back-button></app-back-button>
</div>

原理说明 #

Location.back()方法会直接调用浏览器的历史记录回退，和点击浏览器自带的返回按钮效果一致，完全实现动态返回上一页的需求，不用在每个父组件中重复定义回退方法。

如果你的场景需要更精细的路由控制（比如某些页面需要指定回退路径），也可以给组件添加一个可选的输入属性，默认用Location.back()，特殊情况传入自定义路径：

可选增强版（支持自定义回退路径）

TS文件：

import { Component, Input } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';

@Component({
  selector: 'app-back-button',
  templateUrl: './back-button.component.html',
  styleUrls: ['./back-button.component.css']
})
export class BackButtonComponent {
  @Input() fallbackUrl: string = '/'; // 可选输入属性，默认回退到首页

  constructor(
    private location: Location,
    private router: Router
  ) {}

  goBack(): void {
    // 尝试回退历史记录，如果没有上一页则跳转到 fallbackUrl
    if (window.history.length > 1) {
      this.location.back();
    } else {
      this.router.navigate([this.fallbackUrl]);
    }
  }
}

使用时如果需要指定回退路径：

<app-back-button [fallbackUrl]="'/dashboard'"></app-back-button>

这样既满足了默认动态回退的需求，也能应对特殊场景的自定义路径。

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