如何导航到带有查询参数但不显示的路线？和 = 在 URL 中

Question

我从来没有在 Angular 中实现过路由。我的要求是在从父组件单击图标时导航到详细信息页面。这是我的代码：

产品.component.ts

  // method called when the corresponding pencil/edit icon is clicked
  loadSingleRecord() {
    this._router.navigate(['products/electronic/billing/'], {
      queryParams: { id: 12 }, // let it be id 12 for sometime
    });
  }

产品路由.module.ts

const routes: Routes = [
  ...
  {
    path: 'electronic/billing/:id',
    component: BillingSingleRecordComponent,
  },
  ...
];

@NgModule({
  imports: [RouterModule.forChild(routes), HttpClientModule],
  exports: [RouterModule],
})
export class ProductsRoutingModule {}

这个逻辑工作正常：

localhost:4205/products/electronic/billing/record?id=29

但我不想显示?id=29。能不能这么简单：localhost:4205/products/electronic/billing/record/29。请帮忙。

我忘了提到在到达详细信息组件时我也想要 id：

  ngOnInit(): void {
    this.activatedRoute.queryParams.subscribe((params) => {
      let id = params['id'];
      console.log(id); // OUTPUT undefined
    });

Answer 1

electronic/billing/:id 路径中的:id 不是查询参数，而是路由参数（也称为路径变量）。查看this tutorial了解更多信息

当你导航时，你应该使用

this._router.navigate(['products/electronic/billing', id]);

如果你想在你的组件中阅读这个，你可以使用

ngOnInit(): void {
    this.activatedRoute.params.subscribe((params) => {
        let id = params['id'];
        console.log(id);
    });
}