Angular 2路由问题：如何将URL中的ID替换为名称

嘿，这事儿其实挺简单的，我帮你一步步梳理怎么把URL从/Ddata/1改成/Ddata/name：

1. 先改路由配置 #

首先得调整app.routing.module.ts里的路由规则，把原来的参数标识从id改成name，注意参数前面的斜杠不能丢（你原来的Ddata:id写法其实是有问题的，正确的参数格式是路径/:参数名）。修改后的路由代码如下：

const routes: Routes = [
  { path: '', component: CComponent },
  { 
    path: 'Ddata/:name', // 把原来的:id换成:name，加上斜杠
    component: DComponent, 
    children: [ 
      { path: 'qdata/:name', component: QComponent } // 如果子路由也需要用name参数，同理修改
    ] 
  },
  { path: 'Adata', component: AComponent }
];

2. 更新组件里获取参数的逻辑 #

在DComponent中，原来通过ActivatedRoute获取id的地方，要改成获取name参数。分两种场景：

场景1：组件初始化时只获取一次参数 #

import { ActivatedRoute } from '@angular/router';
import { YourDataService } from './your-data.service';

@Component({...})
export class DComponent implements OnInit {
  currentItem: any;

  constructor(
    private route: ActivatedRoute,
    private dataService: YourDataService
  ) {}

  ngOnInit(): void {
    // 替换原来的id获取逻辑
    const itemName = this.route.snapshot.paramMap.get('name');
    
    if (itemName) {
      // 调用服务拿对应name的数据
      this.dataService.getItemByName(itemName).subscribe(item => {
        this.currentItem = item;
      });
    }
  }
}

场景2：需要监听参数变化（比如在同一个组件切换不同name） #

如果用户可能在这个组件里直接切换URL的name参数，就得用Observable监听：

ngOnInit(): void {
  this.route.paramMap.subscribe(params => {
    const itemName = params.get('name');
    if (itemName) {
      this.dataService.getItemByName(itemName).subscribe(item => {
        this.currentItem = item;
      });
    }
  });
}

3. 调整数据服务的查询逻辑 #

原来的服务应该是根据id查数据，现在得新增或修改成根据name查询的方法。举个例子：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class YourDataService {
  private apiUrl = '你的API地址';

  constructor(private http: HttpClient) {}

  // 原来的根据id查询方法（保留或按需删除）
  getItemById(id: string): Observable<any> {
    return this.http.get(`${this.apiUrl}/items/${id}`);
  }

  // 新增根据name查询的方法
  getItemByName(name: string): Observable<any> {
    // 这里要跟你的后端API匹配，比如路径参数或查询参数
    return this.http.get(`${this.apiUrl}/items/name/${name}`);
    // 如果是查询参数的话：return this.http.get(`${this.apiUrl}/items?name=${name}`);
  }
}

4. 最后别忘了这些细节 #

• 确保你的数据里name是唯一的，不然多个数据重名的话，拿回来的数据会混乱；
• 如果后端还不支持根据name查数据，得先跟后端同学协调改API；
• 跳转路由的时候，原来传item.id的地方要改成传item.name，比如：

  // 原来的写法
  // this.router.navigate(['/Ddata', item.id]);
  // 现在改成
  this.router.navigate(['/Ddata', item.name]);
  

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