Angular 项目路由守卫：如何关闭未激活组件并保存当前状态

在 Angular 中，可以使用路由守卫来控制未激活的路由组件的关闭。具体步骤如下：\n\n1. 创建一个路由守卫服务：可以使用 Angular 提供的 `CanDeactivate` 接口来实现。该接口有一个 `canDeactivate` 方法，用于判断是否允许离开当前路由。\n\ntypescript\nimport { Injectable } from '@angular/core';\nimport { CanDeactivate } from '@angular/router';\nimport { Observable } from 'rxjs';\n\n@Injectable()\nexport class CloseInactiveComponentGuard implements CanDeactivate<any> {\n canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {\n // 在这里实现判断逻辑，如果允许离开当前路由，返回 true；否则返回 false。\n return true;\n }\n}\n\n\n2. 注册路由守卫服务：在应用的路由模块中，将路由守卫服务添加到 `providers` 数组中。\n\ntypescript\nimport { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { CloseInactiveComponentGuard } from './close-inactive-component.guard';\n\nconst routes: Routes = [\n // 路由配置\n];\n\n@NgModule({\n imports: [RouterModule.forRoot(routes)],\n exports: [RouterModule],\n providers: [CloseInactiveComponentGuard] // 添加路由守卫服务\n})\nexport class AppRoutingModule { }\n\n\n3. 在需要关闭未激活的路由组件的路由配置中，添加路由守卫。\n\ntypescript\nimport { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { CloseInactiveComponentGuard } from './close-inactive-component.guard';\nimport { HomeComponent } from './home.component';\n\nconst routes: Routes = [\n {\n path: 'home',\n component: HomeComponent,\n canDeactivate: [CloseInactiveComponentGuard] // 添加路由守卫\n },\n // 其他路由配置\n];\n\n@NgModule({\n imports: [RouterModule.forChild(routes)],\n exports: [RouterModule]\n})\nexport class HomeRoutingModule { }\n\n\n通过以上步骤，当尝试离开当前路由时，会触发 `canDeactivate` 方法，你可以在该方法中实现自定义的逻辑判断，从而控制是否允许离开当前路由。如果返回 true，则允许离开；如果返回 false，则禁止离开。