Angular中Mat-Sidenav与路由联动实现Ryanair式结账侧边栏

嘿，我来帮你搞定这个需求！核心思路就是把路由变化和侧边栏的显示状态绑定起来，不需要额外的<router-outlet>——毕竟主页面要保持不变，咱们一步步来实现：

1. 配置嵌套路由规则 #

首先在路由配置里，把/extras作为父路由，/extras/bags作为它的子路由。因为子路由不需要渲染新的页面内容，所以用一个空组件占位就行：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ExtrasMainComponent } from './extras-main/extras-main.component';

// 空组件，仅用于子路由占位
@Component({ template: '' })
export class EmptyComponent {}

const routes: Routes = [
  // 其他路由配置...
  {
    path: 'extras',
    component: ExtrasMainComponent, // 你的结账主页面组件
    children: [
      { path: 'bags', component: EmptyComponent },
      // 后续可扩展其他子路由，比如/extras/insurance、/extras/seats等
    ]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  declarations: [EmptyComponent] // 别忘了声明空组件
})
export class AppRoutingModule {}

2. 在主组件中监听路由变化 #

在你的ExtrasMainComponent里，注入Router和ActivatedRoute，订阅路由导航事件，根据当前路由判断是否要打开行李侧边栏：

// extras-main.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-extras-main',
  templateUrl: './extras-main.component.html',
  styleUrls: ['./extras-main.component.css']
})
export class ExtrasMainComponent implements OnInit {
  showBagsSidebar = false;

  constructor(private router: Router, private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 监听路由导航完成事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 检查当前激活的子路由是否是bags
      const isBagsRoute = this.route.firstChild?.routeConfig?.path === 'bags';
      this.showBagsSidebar = isBagsRoute || false;
    });
  }

  // 点击按钮打开行李侧边栏的方法
  openBagsSidebar(): void {
    // 相对于当前父路由导航到bags子路由
    this.router.navigate(['bags'], { relativeTo: this.route });
  }
}

3. 模板中控制侧边栏显示 #

在主页面的模板里，根据showBagsSidebar变量控制行李侧边栏的显示/隐藏：

<!-- extras-main.component.html -->
<!-- 主页面内容区域 -->
<div class="checkout-main">
  <button class="bag-btn" (click)="openBagsSidebar()">
    选择行李
  </button>
  <!-- 其他结账主内容... -->
</div>

<!-- 行李侧边栏组件 -->
<app-bags-sidebar 
  *ngIf="showBagsSidebar"
  (close)="closeSidebar()"
></app-bags-sidebar>

4. 处理侧边栏关闭逻辑（可选） #

给侧边栏添加关闭按钮，点击时导航回父路由/extras，同时关闭侧边栏：

// 在ExtrasMainComponent中添加关闭方法
closeSidebar(): void {
  this.router.navigate(['../'], { relativeTo: this.route });
}

5. 验证手动输入路由的场景 #

当用户手动在地址栏输入/extras/bags并回车时，路由导航完成后，代码会自动检测到当前子路由是bags，把showBagsSidebar设为true，侧边栏就会自动打开，完全符合你的需求。

扩展建议 #

如果后续要添加更多侧边栏选项（比如保险、座位选择），可以把当前激活的侧边栏类型用一个字符串变量存储，比如currentSidebar: 'bags' | 'insurance' | null = null，然后根据路由路径匹配对应的侧边栏类型，这样扩展性更强。

内容的提问来源于stack exchange，提问作者Polo