点击Material Angular表格行跳转时出现Cannot match any routes错误如何解决？

错误根因 #

• 1. 组件初始化时错误调用了getEventDetail方法，传入了未赋值的an_event变量，导致an_event.id为undefined，生成非法路由
• 2. 路由配置中admin-events/details/:id属于路径参数配置，但跳转代码中使用了查询参数queryParams，生成的URL格式和路由配置不匹配
• 3. 路由跳转方法的参数格式错误，没有把id值传入路由路径数组中

具体修改步骤 #

1. 移除初始化时的多余调用 #

打开admin-event.component.ts，删除ngOnInit中的this.getEventDetail(this.an_event);这行代码，修改后的ngOnInit如下：

ngOnInit(): void {
  this.getEvents();
}

该方法只有点击表格行的时候才需要触发，不需要在初始化时调用。

2. 修改路由跳转逻辑 #

修改getEventDetail方法，适配路径参数的路由配置，修改后的代码如下：

getEventDetail(an_event: Event) {
  // 直接将id作为路径参数传入路由数组
  this.router.navigate(['/admin-events/details', an_event.id]);
}

修改后生成的URL为/admin-events/details/xxx，和路由配置的规则完全匹配，不会再抛出路由不匹配错误。

（可选）详情页获取路径参数 #

如果需要在AdminEventDetailsComponent中拿到传递的事件id，参考以下代码实现：

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

// ...
constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 方式1：直接取快照值（适用于路由不会复用的场景）
  const eventId = this.route.snapshot.params['id'];
  
  // 方式2：订阅参数变化（适用于同一路由会切换参数的场景）
  this.route.params.subscribe(params => {
    const eventId = params['id'];
    // 调用接口获取事件详情
  })
}

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