带有动态组件的角URL(路由)定制

Question

我做了一个角度项目(摩托车电子商务)，显示产品详细信息的组件负责所有产品，因此这个组件的路由总是相同的：

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

这会导致所有产品对google都有相同的链接(因为google忽略参数?bikeId=……)

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

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

我想做一个脚本，为每次在后端添加新产品时手动创建路径，但看起来是一个痛苦的解决方案。

有什么想法吗？谢谢您的任何帮助！

Answer 1

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

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

ProductDetails组件必须读取参数，然后根据参数中给定的名称加载产品。ActivatedRoute服务提供了一个params 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();
}