javascript - Angular 将 URL 参数发送到 Web 服务

Question

为 TOH 前端创建了后端。 GetHeroes() 工作正常，所以基本管道已经到位。

无法将 id 传递给 GetHero(id: number)

Postman 获取以下 url 并返回

http://192.168.1.125:4200/hero-detail/23  >>>>    { "id": 23, "name": "Celeritas1" }

这是来自 hero-detail.component.ts 的 ngOnInit

 ngOnInit(): void {
    console.log('***' + this.route.params[0]);
        this.route.params
        .switchMap((params: Params) => this.heroService.getHero(+params['id']))
    }

这是来自 hero.service.ts 的 GetHero() 函数console.log 似乎没有被调用。 我在 Web 控制台或 ng 命令行窗口中没有收到错误

private heroesUrl = 'http://localhost:4300/api/heroes';  // URL to web api

 getHero(id: number): Observable<Hero> {
    console.log("enter service.getHero");
   const url = `${this.heroesUrl}/${id}`;
    return this.http.get<Hero>(url).pipe(
      tap(_ => this.log(`fetched hero id=${id}`)),
      catchError(this.handleError<Hero>(`getHero id=${id}`))
    );
  }

在 ngOnInit 语句中使用 console.log 播放...

 console.log('***' + this.route.params[0]);     >>>    ***undefined

console.log('***' + this.route.params['id']);     >>>    ***undefined

console.log('***' + this.route.params );  >>>  ***[Object][Object]

我的问题是:以 switchMap 开头的语句似乎出错了，没有调用服务。我可以尝试更正错误。和/或我如何使用 console.log 引用 Param 数组以进一步诊断问题。

Answer 1

来 self 对 OP 的评论 - 这是快照路线的示例。如果id虽然是动态的，你应该使用 observable<>

ngOnInit(): void {
    let id = +this.route.snapshot.paramMap.get('id'); // coerce your id to a number since that's what your service expects
        this.route.params
        .switchMap((params: Params) => this.heroService.getHero(id))
    }