如何在Angular中实现Node.js Express风格的路由参数？

当然可以在Angular中实现这种路径式的参数传递，你需要调整路由配置并改用正确的参数获取方式：

1. 配置带路径参数的路由 #

在你的路由配置文件（通常是app-routing.module.ts）中，为signin路由添加参数占位符，格式为:参数名：

const routes: Routes = [
  // 其他路由配置...
  { path: 'signin/:id', component: SigninComponent }, // :id 就是路径参数的占位符
];

配置完成后，Angular就能正确识别http://myhost.domain.com/signin/123456这种格式的URL，将123456解析为id参数。

2. 获取路径参数 #

你之前使用的queryParams是用来获取?id=123456这类查询参数的，路径参数需要用paramMap（Angular官方推荐方式）或params来获取：

import { ActivatedRoute } from '@angular/router';

// ...

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 推荐使用 paramMap
  this.route.paramMap.subscribe(paramMap => {
    const id = paramMap.get('id');
    console.log(id); // 输出：123456
  });

  // 也可以使用 params（兼容旧版本，仍可正常使用）
  // this.route.params.subscribe(params => {
  //   const id = params['id'];
  //   console.log(id);
  // });
}

为什么之前的方式无效？ #

你之前的URL被识别为更深层级路由，是因为没有配置带:id的路由规则，Angular会把signin/123456当作signin的子路由去匹配，而你没有对应的子路由配置，因此无法正确解析参数。

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