区分空路径与无参数：Angular SPA路由匹配规则设置问询

你遇到的核心问题是根路径（/）意外匹配了ResultComponent，导致参数为空。这通常是因为路由配置没有明确区分根路径和带参数的路径段。下面是具体的解决方案：

1. 明确区分根路径与带参数路由 #

首先，你需要在路由配置中为根路径指定单独的处理逻辑（比如指向首页组件或重定向），同时让带参数的路由仅匹配包含有效路径段的URL：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ResultComponent } from './result/result.component';
import { HomeComponent } from './home/home.component'; // 假设你有一个首页组件

const routes: Routes = [
  // 根路径指向首页组件，避免匹配ResultComponent
  { path: '', component: HomeComponent },
  // 仅当URL包含一个路径段（如/2017、/2018）时，才匹配ResultComponent并传入resultId参数
  { path: ':resultId', component: ResultComponent }
];

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

如果你的应用没有首页组件，也可以将根路径重定向到一个提示选择年份的页面：

const routes: Routes = [
  // 根路径完全匹配时，重定向到选择年份页面
  { path: '', redirectTo: '/select-year', pathMatch: 'full' },
  { path: 'select-year', component: SelectYearComponent }, // 新增选择年份组件
  { path: ':resultId', component: ResultComponent }
];

2. 可选：验证参数有效性 #

如果希望仅允许2017和2018作为有效参数，可以添加路由守卫（CanActivate）来拦截无效参数：

步骤1：创建路由守卫 #

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ValidResultIdGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    const resultId = route.paramMap.get('resultId');
    // 仅允许2017和2018作为有效参数
    if (resultId === '2017' || resultId === '2018') {
      return true;
    }
    // 无效参数时重定向到首页或提示页
    return this.router.createUrlTree(['/select-year']);
  }
}

步骤2：在路由中使用守卫 #

const routes: Routes = [
  { path: '', component: HomeComponent },
  { 
    path: ':resultId', 
    component: ResultComponent,
    canActivate: [ValidResultIdGuard] // 添加守卫验证参数合法性
  }
];

3. 确认路由出口配置 #

最后，确保你的app.component.html中只有一个<router-outlet></router-outlet>，并且没有直接渲染ResultComponent，避免根路径下默认显示该组件：

<!-- app.component.html -->
<router-outlet></router-outlet>

这样配置后，访问http://mydomain会显示HomeComponent（或重定向到指定页面），只有访问http://mydomain/2017或http://mydomain/2018时才会渲染ResultComponent，并传入对应的resultId参数。

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