angular页面跳转并且销毁当前页面

在Angular中，可以使用路由模块来进行页面跳转，并且在页面跳转后销毁当前页面。下面是一个简单的例子：

1. 首先，在组件中，需要订阅路由事件，以便在路由导航发生时销毁当前组件。例如：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-home',
  template: `
    <button (click)="goToAbout()">Go to About</button>
  `
})
export class HomeComponent implements OnInit, OnDestroy {

  private unsubscribe$ = new Subject<void>();

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      takeUntil(this.unsubscribe$)
    ).subscribe(() => {
      this.unsubscribe$.next();
      this.unsubscribe$.complete();
    });
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  goToAbout() {
    this.router.navigate(['/about']);
  }

}

在这个例子中，首先定义了一个名为unsubscribe$的Subject对象，用于在销毁组件时取消订阅路由事件。然后在ngOnInit()方法中，订阅路由事件，并在路由导航完成后销毁当前组件，同时取消订阅路由事件。在goToAbout()方法中，使用router.navigate()方法来导航到/about路径。

2. 在路由模块中，需要配置路由守卫，以便在路由导航发生时销毁当前组件。例如：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent, canActivate: [DestroyGuard] }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在这个例子中，路由模块中配置了一个DestroyGuard守卫，用于在路由导航发生时销毁当前组件。可以在守卫中实现CanActivate接口，并在canActivate()方法中销毁当前组件。例如：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class DestroyGuard implements CanActivate {

  constructor(private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    setTimeout(() => {
      this.router.getCurrentNavigation().previousNavigation?.extractedUrl.segment.shift();
    });
    return true;
  }

}

在这个例子中，首先在canActivate()方法中，使用setTimeout()方法来延迟执行一段时间。然后使用this.router.getCurrentNavigation().previousNavigation?.extractedUrl.segment.shift()方法来将前一个导航的路径中的第一个片段（即当前组件的路径）从导航历史记录中删除。这样，当页面跳转完成后，就会自动销毁当前组件。