如何在 Angular v16 中获取 url 参数

Question

这是我的路由配置，我想访问

class

中的

instance

和

instanceNavigatorComponent

等 URL 参数。但是，我目前在控制台中得到“未定义”。

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  {
    path: 'expert',
    component: ExpertDialogComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        redirectTo: 'instances',
        pathMatch: 'full',
      },
      
      {
        path: 'instances',
        component: InstancesComponent,
        children: [
          {
            path: ':class',
            component: InstanceNavigatorComponent,
          },
          {
            path: ':class/:instance',
            component: InstanceNavigatorComponent,
          },
        ],
      },
    ],
  },

];

这是

instanceNavigatorComponent

：

ngOnInit(): void {
    
        this.router.paramMap.subscribe((params) => { //router is ActivatedRoute
          const classParam = params.get('class');
          const instanceParam = params.get('instance');
          console.log('Class parameter:', classParam);
          console.log('Instance parameter:', instanceParam);
        });
} 

Answer 1

您似乎是在 Router 实例上调用 paramMap，而不是在 ActivatedRoute 实例上调用。因此你的代码应该是这样的：

 constructor(private route: ActivatedRoute) { }

 ngOnInit() {
  this.route.params.subscribe((params) => {
   if (params) {
    const classParam = params.get('class');
    const instanceParam = params.get('instance');
    console.log('Class parameter:', classParam);
    console.log('Instance parameter:', instanceParam);
   } 
  })
 }

让我知道它是否有效。