使用 Angular 按下后退按钮时如何导航到另一条路线

Question

I'm trying to navigate to a parent route whenever a back button is pressed in my Angular app instead of a sibling route. I have tried a few methods I saw on Stack Overflow. the latest being this...

import { Component } from '@angular/core';
import { UserService } from '../shared/User.service';
import { ActivatedRoute, Router } from '@angular/router';
import { IUser } from '../shared/User';

import { HostListener } from '@angular/core';

@Component({
  selector: 'user',
  templateUrl: "./user.component.html",
  styleUrls: ['./user.component.css']
    
})

export class userComponent {
  user: IUser
  constructor(
      private userService : userService,
      private route : ActivatedRoute,
      private router :Router
      ){}
  ngOnInit(){
    this.route.params.subscribe(val=> {
      this.user = this.userService.getuser(val['user'])
    })
  }
  @HostListener('window:popstate', ['$event'])
  onBrowserBackBtnClose(event:Event){
    console.log('Back button pressedm');
    this.router.navigate([`/users`]);
  }
}

but instead it routes to the parent and immediately goes back to the sibling route. Any advice on what to do?

Answer 1

Try this solution, I think this will resolve your issue:

@HostListener('window:popstate', ['$event'])
  onBrowserBackBtnClose(event:Event){
    event.preventDefault();
    console.log('Back button pressedm');
    this.router.navigate([`/users`]);
  }