ERROR 错误：请求的路径在索引 1 处包含未定义的段答案

【问题标题】：ERROR Error: The requested path contains undefined segment at index 1ERROR 错误：请求的路径在索引 1 处包含未定义的段
【发布时间】：2022-07-15 23:13:15
【问题描述】：

我正在尝试创建一个 onClick 函数，这样当单击按钮时，它会导航到具有所选函数 id 的另一个页面。但是，每当我运行以下代码时，我都会进入控制台：

ERROR 错误：请求的路径在索引 1 处包含未定义的段

component.ts:

constructor(private damageAssessmentService: DamageAssessmentReportService, private router: Router, private route: ActivatedRoute) {}

    oneDAFormID: string;
      onView(){
        this.damageAssessmentService.getOneDAForm(this.oneDAFormID)
        this.route.params.subscribe((params: Params)=> {
          this.oneDAFormID = params['getDAId'];
          console.log(this.oneDAFormID);
        //navigate to /view-full-daform/_id
        this.router.navigate(['/view-full-daform' , this.oneDAFormID])
      })
      }

服务：

getOneDAForm(getDAId: any){
    return this.webReqService.get(`DamageAssessmentForm/${getDAId}`);
  }

网络服务：

get(uri: string) {
    return this.http.get(`${this.ROOT_URL}/${uri}`)

我不太清楚如何从页面中获取 id 并导航到另一个页面，因此我可以在 ngOnInit() 中实现 id。任何帮助将不胜感激

【问题讨论】：

onView 的第一行至少有几个问题 - 您在初始化之前使用 oneDAFormId，它似乎 getOneDAForm 返回一个可观察的但您使用标准语法调用它，你不会对结果做任何事情。

标签： angular typescript

【解决方案1】：

您也可以尝试在 html 中使用 routerLink 来使用 id 进行路由，所以在你的情况下，在按钮标签上：

<button [routerLink]="['/view-full-daform', id]">Next</button>

但是，您需要将 view-full-daform 的路径存储为

path: 'view-full-daform/:id'

【讨论】：

【解决方案2】：

它在索引 1 处告诉您这是一个重要线索。

以下是路由器navigate函数的示例：

this.router.navigate(['/...' , x]) // Where x is a route segment

它有一个Array<string>，带有多个索引作为参数。

由于我们从 0 开始计数，索引 1 将是第二个参数

所以那个索引要么是

未定义
您获取的路由器参数不正确
您根本没有获得路由参数 (null)。

这就是这个错误告诉你的。

【讨论】：

【解决方案3】：

首先，你需要用你的路由声明一个数学路由

{ path: 'hero/:id', component: HeroDetailComponent }

后续在点击事件上使用路由器在您的组件中，获取将 id 传递给方法的 id。

this.router.navigate(['/heroes', 5])

在目的地，组件从路由包中导入ActivatedRoute并将私有变量添加到构造函数中，以便Angular注入它们（使它们对组件可见）。

constructor(
  private route: ActivatedRoute,
) {
 const id = this.route.snapshot.paramMap.get('id')!;
}

您可以阅读官方 Angular 文档https://angular.io/guide/router#heroes-list-optionally-selecting-a-hero中的完整示例

【讨论】：