Angular 2参数路由时，构造函数注入导致页面无法加载问题

我来帮你排查这个问题——这种路由参数注入引发的页面加载失败，我在Angular 2项目里碰到过好几次，大概率是注入方式、路由配置或者参数获取时机出了问题，咱们针对涉及的三个文件逐一修正：

1. 先检查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';
import { EmpListComponent } from './emp-list.component';

// 定义带参数的路由规则，`:id`是参数占位符
const appRoutes: Routes = [
  { path: 'employees/:id', component: EmpListComponent },
  { path: '', redirectTo: '/employees/1', pathMatch: 'full' } // 设置默认跳转路由
];

@NgModule({
  imports: [
    BrowserModule,
    // 必须调用`forRoot`初始化整个应用的路由系统
    RouterModule.forRoot(appRoutes)
  ],
  declarations: [
    AppComponent,
    EmpListComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

关键注意点：如果没导入RouterModule.forRoot(appRoutes)，路由系统根本不会初始化，直接导致组件加载失败。

2. 修正emp-list.component.ts的参数获取逻辑 #

很多人会在构造函数里直接同步获取路由参数，但路由参数是异步加载的，这时候拿不到值就会引发异常。正确的做法是在ngOnInit生命周期钩子中处理：

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

@Component({
  selector: 'app-emp-list',
  template: `
    <div class="employee-details">
      <h3>当前员工ID: {{ currentEmpId }}</h3>
    </div>
  `
})
export class EmpListComponent implements OnInit {
  currentEmpId: string;

  // 构造函数注入`ActivatedRoute`是正确的，但不要在这里直接拿参数
  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit(): void {
    // 情况1：组件只会被加载一次（不会在同一组件内切换路由参数），用快照获取
    this.currentEmpId = this.activatedRoute.snapshot.paramMap.get('id');

    // 情况2：需要在同一组件内更新参数（比如从/employees/1跳转到/employees/2），要订阅参数变化
    this.activatedRoute.paramMap.subscribe(params => {
      this.currentEmpId = params.get('id');
      // 这里可以添加获取员工详情的API调用逻辑
    });
  }
}

常见错误：在构造函数里直接写this.currentEmpId = this.activatedRoute.snapshot.paramMap.get('id')，此时路由还未完全激活，snapshot可能为空，直接导致页面崩溃。

3. 确保app.component.ts有路由出口 #

没有<router-outlet>的话，路由匹配到的组件根本没有地方渲染，也会导致页面加载异常：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <nav>
      <a routerLink="/employees/1">查看员工1</a>
      <a routerLink="/employees/2">查看员工2</a>
    </nav>
    <!-- 必须添加这个路由出口，路由组件会渲染在这里 -->
    <section>
      <router-outlet></router-outlet>
    </section>
  `
})
export class AppComponent { }

最后总结几个容易踩的坑 #

• 路由配置里忘记加参数占位符:id，导致路由匹配失败
• 没有在AppModule中导入RouterModule.forRoot()，路由系统未初始化
• 在构造函数中同步获取路由参数，而非在ngOnInit中处理
• 缺少<router-outlet>，组件无渲染入口

按照上面的步骤修改后，页面应该就能正常加载并获取路由参数了。

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