Angular 使用動態組件自定義 URL（路由）

Question

我做了一個 Angular 項目（摩托車電子商務），顯示產品詳細信息的組件負責所有產品，因此該組件的路由始終相同：

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

這會導致所有產品對 google 都有相同的鏈接（因為 google 忽略了參數？bikeId=.....）

我的問題是：如何根據獲取的產品自定義網址？ ， 像這樣：

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();
}