Angular 6如何向根路由传递可选参数并在Dashboard组件获取？

我来帮你搞定这个问题，你现在的问题主要出在路由配置的格式错误和参数获取的细节上，咱们一步步来解决：

一、先修正AdminModule里的路由配置问题 #

你当前写的path: '/:id'是错误的——Angular的路由路径不能以斜杠开头，而且其实可以用更简洁的方式处理可选参数，不用写两个重复的Dashboard路由。

修正后的路由配置（两种可选写法） #

写法1：合并为带可选参数的单个路由（推荐）

直接用?标记参数为可选，这样一个路由就能匹配空路径和带id的路径：

const routes: Routes = [
  { 
    path: ':id?', // ?表示id是可选参数
    component: DashboardComponent, 
    canActivate: [AuthGuard],
    pathMatch: 'full'
  },
  {path: 'users', component: UsersComponent, canActivate: [AuthGuard]},
];

写法2：保留两个路由但修正路径格式

如果你更习惯分开写，记得把斜杠去掉：

const routes: Routes = [
  { 
    path: '', 
    component: DashboardComponent, 
    pathMatch: 'full', 
    canActivate: [AuthGuard]
  },
  { 
    path: ':id', // 去掉前面的斜杠
    component: DashboardComponent, 
    canActivate: [AuthGuard]
  },
  {path: 'users', component: UsersComponent, canActivate: [AuthGuard]},
];

二、正确获取路由参数 #

Angular现在推荐使用paramMap来获取参数（params是旧版API，虽然能用但不够严谨），修改你的组件代码：

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

export class DashboardComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 订阅参数变化（适合参数可能动态更新的场景）
    this.route.paramMap.subscribe(paramMap => {
      const id = paramMap.get('id');
      console.log('获取到的id参数:', id); // 没传参数时id为null
    });

    // 如果只需要获取初始化时的参数，用快照更高效：
    // const id = this.route.snapshot.paramMap.get('id');
    // console.log('初始化时的id:', id);
  }
}

三、验证效果 #

现在你可以在浏览器地址栏测试：

• 访问/：控制台会输出获取到的id参数: null
• 访问/123：控制台会输出获取到的id参数: 123

这样就能实现给DashboardComponent传递可选参数的需求了～

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