在Angular中，路由器允许我们定义带参数的URL，这些参数表示路径中的变量。这些变量可以使用路径变量（path variables）或查询参数（query parameters）的形式传递。在Angular中，我们可以使用路由器配置对象中的path属性来定义路径变量。路径变量是由冒号（:）字符开头的字符串表示的。例如，我们可以定义一个路由器路径，该路径由一个ID参数组成，如下所示：

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

const routes: Routes = [
  { path: 'product/:id', component: ProductDetailComponent }
];

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

在上面的代码示例中，我们定义了一个路由器路径 /product/:id，其中:id对应的是一个路径变量。通过这个路由器路径，我们可以将id作为参数传递给ProductDetailComponent组件。

接下来，在ProductDetailComponent组件中，我们可以使用ActivatedRoute服务来访问路径变量。ActivatedRoute服务是Angular路由器中的一个服务，它提供了路由器信息的可观测对象。我们可以通过ActivatedRoute服务来获取路由参数中的路径变量。例如，以下代码展示了如何在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 {
  productId: number;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.productId = +params.get('id');
    });
  }
}

在上面的代码示例中，我们通过ActivatedRoute服务