如何在 Angular 项目中动态使用后退按钮？

Question

我在 Angular 15 项目中生成了一个后退按钮组件，我想在项目中的多个页面上显示此后退按钮。我想使用 Angular 路由动态返回到上一个屏幕，因此我定义了后退按钮组件，例如：

    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    
    @Component({
      selector: 'app-back-button',
      templateUrl: './back-button.component.html',
      styleUrls: ['./back-button.component.css']
    })
    
        export class BackButtonComponent implements OnInit {
        
          constructor(private router: Router) {}
          ngOnInit(): void {
        
          }
        
          goBack(url: string): void {
            this.router.navigate([url]);
          }
        }

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

     </div>
     <app-back-button (click)="goBack('/')"></app-back-button>
     </div>

这不起作用，因为 goBack 方法应该位于使用它的组件中，但我不想在使用后退按钮的每个组件中定义 goBack() 方法。我希望后退按钮组件能够动态处理路由。

Answer 1

您可以使用@angular/common 的定位服务。

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

@Component({
  selector: 'app-back-button',
  templateUrl: './back-button.component.html',
  styleUrls: ['./back-button.component.css']
})

export class BackButtonComponent implements OnInit {
    
constructor(private router: Router, private location: Location) {}
      
ngOnInit(): void {}
    
 goBack(): void {
   this.location.back();
 }
}

Answer 2

如果只是简单的返回，可以使用位置服务，但是从按钮组件 self 调用：

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

@Component({
  selector: 'app-back-button',
  templateUrl: './back-button.component.html',
  styleUrls: ['./back-button.component.css']
})
export class BackButtonComponent {
  readonly location = inject(Location);
}

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