Angular2从URL获取查询参数时出现报错问题

你遇到的这个注入错误，本质是没有在模块中正确配置路由模块，导致Angular无法找到ActivatedRoute等服务的提供者。下面一步步帮你搞定：

第一步：确保路由模块已正确导入 #

首先检查你的AppModule（如果是子组件则检查对应Feature模块），必须导入RouterModule并配置路由规则：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router'; // 导入路由模块

import { AppComponent } from './app.component';

// 定义路由规则（至少要有根路由配置）
const routes: Routes = [
  { path: '', component: AppComponent },
  // 其他路由规则...
];

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes) // 根模块用forRoot，子模块用forChild
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

第二步：在组件中正确注入并提取参数 #

不要手动实例化ActivatedRoute，要通过Angular的依赖注入系统注入，然后用两种方式提取参数：

// app.component.ts
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 {
  id1: string | null;
  id2: string | null;

  // 构造函数中注入ActivatedRoute
  constructor(private route: ActivatedRoute) {
    this.id1 = null;
    this.id2 = null;
  }

  ngOnInit(): void {
    // 方式1：快照提取（适合参数不会动态变化的场景）
    this.id1 = this.route.snapshot.queryParamMap.get('id1');
    this.id2 = this.route.snapshot.queryParamMap.get('id2');
    console.log('快照提取的参数：', this.id1, this.id2);

    // 方式2：订阅参数变化（适合参数可能动态更新的场景）
    this.route.queryParamMap.subscribe(paramMap => {
      this.id1 = paramMap.get('id1');
      this.id2 = paramMap.get('id2');
      console.log('订阅到的参数：', this.id1, this.id2);
    });
  }
}

错误原因解释 #

你看到的StaticInjectorError: No provider for t!（这里的t是压缩后的变量名，实际对应ActivatedRoute），是因为Angular的依赖注入容器找不到ActivatedRoute的提供者——而这个提供者是由RouterModule在导入时自动注册的。只要正确配置RouterModule.forRoot()/forChild()，这个错误就会消失。

额外注意事项 #

• 如果组件属于懒加载模块，要使用RouterModule.forChild(routes)而非forRoot
• URL中的&是HTML转义后的符号，浏览器会自动解析为&，不影响参数提取

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