在Angular中,可以使用动态路由来将参数添加到URL的末尾。下面是一个示例:
首先,定义一个路由配置,将参数添加到URL的末尾:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { YourComponent } from './your-component.component';
const routes: Routes = [
  { path: ':id', component: YourComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
接下来,在组件中获取参数的值:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  id: string;
  constructor(private route: ActivatedRoute) { }
  ngOnInit(): void {
    this.id = this.route.snapshot.paramMap.get('id');
  }
}
在上面的示例中,我们使用ActivatedRoute服务来获取URL参数的值。在ngOnInit生命周期钩子中,我们使用route.snapshot.paramMap.get('id')方法获取名为'id'的参数的值,并将其赋给组件中的id属性。
最后,在模板中使用参数的值:
The ID is: {{ id }}
这样,当访问像example.com/123这样的URL时,组件中的'id'属性将被设置为'123',并在模板中显示出来。
请注意,以上示例中的组件和路由配置只是示意图,您需要根据实际需求进行调整。