Hey there! Let's figure out how to handle those variable-depth category routes in Angular 5—this is a common scenario when working with nested category trees and REST APIs, so I’m glad you asked.

Step 1: Define the Wildcard Route #

First, you’ll need to set up a route that matches your dynamic path pattern. Angular 5 supports wildcard (**) matching, which will capture any number of segments between Categories/ and /p/{product-code}.

Add this to your route configuration (make sure to place it after any more specific routes to avoid overriding them):

import { Routes, RouterModule } from '@angular/router';
import { ProductDetailComponent } from './product-detail/product-detail.component';

const routes: Routes = [
  // Your other specific routes go here first
  // ...
  {
    path: 'Categories/**/p/:productCode',
    component: ProductDetailComponent
  }
];

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

Step 2: Extract the Category Path in Your Component #

The wildcard (**) captures all the intermediate category segments, but you’ll need to parse them from the route to get the full category path. Use the ActivatedRoute service to access the URL segments and extract what you need.

Here’s how to do it in your ProductDetailComponent:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  categoryPath: string;
  productCode: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // Get all URL segments from the route snapshot
    const urlSegments = this.route.snapshot.url;
    
    // Find the index of the 'p' segment to split the path
    const pSegmentIndex = urlSegments.findIndex(segment => segment.path === 'p');
    
    // Extract category segments: skip the first 'Categories' segment, stop before 'p'
    const categorySegments = urlSegments.slice(1, pSegmentIndex);
    
    // Join the category segments into a single path string
    this.categoryPath = categorySegments.map(seg => seg.path).join('/');
    
    // Get the product code from the route parameter
    this.productCode = this.route.snapshot.paramMap.get('productCode');

    // Now you can use these values to fetch your product data
    console.log(`Loading product ${this.productCode} from category path: ${this.categoryPath}`);
  }
}

Key Notes to Remember #

• Route Order Matters: Always place this wildcard route after more specific routes (like /Categories or /Categories/root-category). Angular matches routes in the order they’re defined, so a wildcard route placed first would override all other routes under Categories/.
• Route Guards (If Needed): If you need to add route guards (like authentication or data preloading), you can access the URL segments the same way using ActivatedRouteSnapshot in your guard class.
• Resolver for Preloading Data: If you want to fetch the product data before the component loads, you can add a resolver. The resolver would use the same logic to extract categoryPath and productCode from the route snapshot, then call your REST API.

That’s it! This setup will handle any number of subcategory levels between the root category and the product detail path.

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