Angular路由变更时如何重新加载并筛选Grid数据

嘿，作为Angular新手碰到这种路由联动数据筛选的问题太正常啦，我来一步步帮你梳理清楚怎么实现～

第一步：先确保你的路由配置正确 #

首先得在路由模块里定义带品牌参数的路由，这样Angular才能识别URL里的brand1/brand2这些动态值。比如：

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

const routes: Routes = [
  // 这里的`:brand`就是动态参数，用来匹配URL里的品牌名称
  { path: 'prizes/:brand', component: PrizesComponent }
];

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

第二步：在组件中监听路由变化并获取品牌参数 #

因为同一个组件切换路由时（比如从brand1切到brand2），组件不会重新初始化，所以我们需要主动监听路由参数的变化，用ActivatedRoute来获取参数。

// prizes.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-prizes',
  templateUrl: './prizes.component.html',
  styleUrls: ['./prizes.component.css']
})
export class PrizesComponent implements OnInit, OnDestroy {
  // 用来清理订阅，避免内存泄漏
  private destroy$ = new Subject<void>();
  currentBrand: string | null = null;

  // 注入ActivatedRoute，用来获取路由信息
  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 监听路由参数的变化
    this.route.paramMap
      .pipe(takeUntil(this.destroy$)) // 组件销毁时自动取消订阅
      .subscribe((paramMap: ParamMap) => {
        // 从paramMap里取出品牌参数
        this.currentBrand = paramMap.get('brand');
        // 拿到品牌后立即调用你的数据加载方法
        if (this.currentBrand) {
          this.loadGridData(this.currentBrand);
        }
      });
  }

  // 你已有的获取数据的方法，把品牌作为参数传入即可
  loadGridData(brand: string): void {
    // 这里写你原本的逻辑，比如调用API获取对应品牌的数据，再更新Grid
    console.log(`正在加载品牌${brand}的Grid数据...`);
    // 示例：this.dataService.getPrizesByBrand(brand).subscribe(data => this.gridData = data);
  }

  ngOnDestroy(): void {
    // 组件销毁时清理订阅
    this.destroy$.next();
    this.destroy$.complete();
  }
}

第三步：验证效果 #

现在当你在http://localhost:3000/prizes/brand1、brand2、brand3之间切换时，路由参数的订阅会自动触发，拿到新的品牌名称后调用loadGridData方法，Grid里的数据就会跟着重新加载并筛选啦～

额外小提示 #

如果你的路由还有查询参数需要监听，可以改用this.route.queryParamMap；要是需要监听整个路由的变化，用this.route.url就行，不过你的场景用paramMap完全足够。

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