Angular路由取参报错this.route.snapshot.params.get is not a function咨询

存在的问题 #

• 路由配置缺失根路径匹配规则，访问localhost:4200时无对应路由
• 路由参数调用了不存在的get()方法，snapshot.params为普通对象，没有内置get方法
• 代码存在冗余：app.module.ts重复导入AppRoutingModule，app.component.ts末尾多了冗余的闭合括号
• 未对无id参数的场景做兼容，根路径访问时会出现NaN

代码修改 #

1. 修改app-routing.module.ts #

补充根路径路由配置：

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

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

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

2. 修改app.component.ts #

修正参数获取逻辑，兼容无id场景：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'RacveApp1';
  event:any;
  public racva: any;

  constructor(private route: ActivatedRoute){}

  ngOnInit(){
    // 使用官方推荐的paramMap获取参数
    const idStr = this.route.snapshot.paramMap.get('id');
    this.racva = idStr ? parseInt(idStr) : null;
    console.log(this.racva);
  }
}

3. 优化app.module.ts #

删掉重复导入的AppRoutingModule即可，其余代码无需改动。

4. 检查app.component.html #

确保文件中存在<router-outlet></router-outlet>标签，用于渲染路由匹配的组件。

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