Angular 18路由参数取值为null，如何正确获取路由参数值？

1. 组件缺少@Component装饰器 #

你的ShowComponent代码中缺少必要的@Component装饰器，Angular无法识别这是一个合法组件，导致路由加载组件时出现异常，进而无法正确获取路由参数。

正确的show.component.ts需包含完整的组件装饰器配置（Angular 18默认生成独立组件，需设置standalone: true）：

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

@Component({
  selector: 'app-show',
  standalone: true,
  imports: [], // 根据需求导入所需模块/组件
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.css']
})
export class ShowComponent implements OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    const showdate = this.route.snapshot.paramMap.get('showdate');
    console.log(showdate);
  }
}

2. 检查根组件是否包含<router-outlet> #

确保根组件（通常是AppComponent）的模板中添加了<router-outlet></router-outlet>，否则路由匹配的组件无法渲染，参数自然无法获取。

示例app.component.html：

<router-outlet></router-outlet>

3. 确认路由在main.ts中正确注册 #

Angular 18默认使用独立组件模式，需在main.ts中通过provideRouter注册路由配置：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
});

4. 优化参数获取逻辑 #

你代码中使用String(this.route.snapshot.paramMap.get('showdate'))会将null转换为字符串"null"，建议直接获取后判断参数是否存在：

ngOnInit() {
  const showdate = this.route.snapshot.paramMap.get('showdate');
  if (showdate) {
    console.log(showdate);
  } else {
    console.log('未获取到showdate参数');
  }
}

完成以上步骤后，重新启动项目访问/setlist/123，即可正确获取到showdate参数的值123。

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