Angular新手求助：无法获取URL中的id参数值

Hey Andrew, let's sort out why you're seeing an empty {} when trying to grab that id from URLs like /page/878—I remember hitting this exact snag when I was new to Angular routing! Let's go through the most common fixes step by step:

1. Double-Check Your Routing Configuration #

First, make sure you've actually defined the route parameter in your app-routing.module.ts. This is the #1 reason params come up empty. You need to use the :id placeholder to tell Angular that part of the URL is a dynamic parameter:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageComponent } from './page/page.component';

const routes: Routes = [
  // Add this line with the :id placeholder
  { path: 'page/:id', component: PageComponent },
  // Your other routes go here
];

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

2. Correctly Subscribe to Route Params in Your Component #

Next, ensure you're using ActivatedRoute properly in your PageComponent. The old params observable still works, but Angular recommends using paramMap for better type safety. Here's how to set it up:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css']
})
export class PageComponent implements OnInit {
  pageId: string | null = null;

  // Inject ActivatedRoute in the constructor
  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // Subscribe to paramMap to get the id
    this.route.paramMap.subscribe((params) => {
      this.pageId = params.get('id');
      console.log('Page ID:', this.pageId); // This should now log 878!
    });

    // If you prefer the old params approach (still valid):
    // this.route.params.subscribe((params) => {
    //   this.pageId = params['id'];
    //   console.log('Page ID:', this.pageId);
    // });
  }
}

3. Verify Component and Route Setup #

Quick sanity checks to rule out small mistakes:

• Make sure PageComponent is added to the declarations array in your AppModule (or a feature module if you're using one).
• Confirm you haven't accidentally misspelled the route path or the parameter name (case matters! If your route uses :id, you need to get 'id' from paramMap, not 'ID').

4. Test the Right Way #

If you're refreshing the page directly, Angular should still pick up the param—but if you're navigating via a routerLink, make sure you're passing the parameter correctly:

<!-- Example routerLink in your template -->
<a [routerLink]="['/page', 878]">Go to Page 878</a>

Once you've checked all these steps, restart your dev server with ng serve and hit http://localhost:4200/page/878 again—you should see the ID logged in the console instead of an empty object!

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