Angular 带动态组件的角度URL（路由）自定义

我做了一个Angular项目（摩托车电子商务），显示产品详细信息的组件负责所有产品，因此该组件的路径始终相同：

https://fakeweb.com/second-hand-bikes/details?bikeId=7440483

这导致所有产品都有相同的谷歌链接（因为谷歌忽略参数？bikeId=…）

我的问题是：如何根据获取的产品定制URL？，如下所示：

https://fakeweb.com/second-hand-bikes/details/yamaha-xmax-300

我曾考虑编写一个脚本，每次在后端添加新产品时手动创建路由，但这看起来是一个痛苦的解决方案

---

有什么想法吗？谢谢你的帮助

显示特定产品详细信息的组件的路由需要该产品名称的路由参数。我们可以通过以下途径实现这一点：

export const routes: Routes = [
  [...]
  { path: 'second-hand-bikes/details/:name', component: ProductDetails }
];

ProductDetails组件必须读取参数，然后根据参数中给定的名称加载产品。

ActivatedRoute

服务提供了一个参数

Observable

，我们可以订阅该参数以获取路由参数：

productName: string;
private sub: any;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.sub = this.route.params.subscribe(params => {
     this.productName = params['name'];

     // In a real app: dispatch action to load the details here.
  });
}

ngOnDestroy() {
  this.sub.unsubscribe();
}

---

为什么不在路线上使用你的自行车？