如何正确使用带参数的routerLink？routerLink传参失效问题求助

你当前直接在routerLink里拼接查询参数的写法不符合Angular规范，导致无法正常工作，下面两种是正确的实现方式：

1. 使用查询参数（Query Params） #

如果需要生成/post?id=1这种带查询参数的URL，要通过[queryParams]属性传递参数，而非直接拼在路径字符串里：

<a [routerLink]="['/post']" [queryParams]="{ id: 1 }">
  Link
</a>

在目标组件中接收参数时，注入ActivatedRoute并订阅queryParams：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    const postId = params['id'];
    // 处理参数逻辑
  });
}

2. 使用路由路径参数（Path Params） #

如果希望参数作为路由路径的一部分（比如/post/1），需先在路由配置中定义参数占位符：

// 路由模块（如app-routing.module.ts）
import { Routes, RouterModule } from '@angular/router';
import { PostComponent } from './post/post.component';

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

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

然后在routerLink中按顺序传入参数值：

<a [routerLink]="['/post', 1]">
  Link
</a>

目标组件中接收路径参数的方式：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
    const postId = params['id'];
    // 处理参数逻辑
  });
}

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