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

时间:2020-12-18 17:52:17

标签: angular angular-ui-router angular-routing angular-router

每当在我的 Angular 应用程序中按下后退按钮而不是同级路由时,我都会尝试导航到父路由。我尝试了一些在 Stack Overflow 上看到的方法。最新的是这个...

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`]);
  }
}

而是路由到父路由并立即返回到兄弟路由。 有什么建议吗?

1 个答案:

答案 0 :(得分:0)

试试这个解决方案,我认为这会解决你的问题:

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