如何在 Angular 7 的激活链接中获取 url 参数并从服务类调用 rest api

Posted 2023-03-13

【中文标题】如何在 Angular 7 的激活链接中获取 url 参数并从服务类调用 rest api

【英文标题】：How to get url parameter in activated link in angular 7 and call rest api from service class

【发布时间】：2020-04-16 10:23:44

【问题描述】：

我想使用 Get 参数使用 id 字段获取数据。 Follwing 是我的 html url 代码，它重定向到特定页面但不调用服务来获取 rest api

  <a [routerLink]="['/usedCars/detail', lists.id]" class="btn btn-danger">Read more...</a>

下面是我的 service.ts 函数，我已经实现了 import HttpClient, HttpErrorResponse from '@angular/common/http';

getcarDetail(id:string)
    return this.http.get<Autocardetail>(this.ServerUrl + 'autocardetail/'+id).pipe(
      catchError(this.handleError)
    );
  

下面是我在 ngOninit 函数上调用服务的 component.ts 文件。

import  Component, OnInit  from '@angular/core';

import  Router, ActivatedRoute, ParamMap from '@angular/router';
import  Autocardetail  from '../autocardetail';
import  AutopostService  from '../autopost.service';

import  Observable  from 'rxjs';
import  switchMap  from 'rxjs/operators';

@Component(
  selector: 'app-autopostdetail',
  templateUrl: './autopostdetail.component.html',
  styleUrls: ['./autopostdetail.component.css']
)
export class AutopostdetailComponent implements OnInit 
  detail$: Observable<Autocardetail>;
  constructor(
        private route: ActivatedRoute,
        private router: Router,
        private autopostService: AutopostService
      ) 

  ngOnInit() 
    this.detail$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => 
        return this.autopostService.getcarDetail(params.get('id'))
    )
    );
  

下面是我的类文件

export class Autocardetail 
  id: string;
  car_name: string;
  car_model: string;
  car_built: string;
  car_manufac_year: string;

下面是一个邮递员示例，响应的样子，

    "car_id": "0",
    "car_name": "Nissan",
    "car_model": "Sunny",
    "car_built": "Nissan inc",
    "car_manufac_year": "2019",
    "usedcarimages": [
        "0_Nissan-1.jpg",
        "0_Nissan-2.jpg"
    ]

我使用这个网站作为参考https://www.truecodex.com/course/angular-project-training/service-and-http-client-for-blog-detail-recent-blog-and-categories-angular

【问题讨论】：

你遇到了什么错误？

不，我没有收到任何错误，但它也没有从服务类调用 api 请求

在下面查看我的解决方案。

【参考方案1】：

我认为您的代码中唯一的潜在问题是swtichMap() 的使用。

目前-

switchMap((params: ParamMap) =>
  this.autopostService.getcarDetail(params.get('id'))
)

代码指令this.autopostService.getcarDetail(params.get('id'))应该和swtichMap()在同一行如果你使用箭头函数或显式return语句需要提到如果你打破了界限。

正确方法-

switchMap((params: ParamMap) => 
  return this.autopostService.getcarDetail(params.get('id'))
)

或

switchMap((params: ParamMap) => this.autopostService.getcarDetail(params.get('id')))

【讨论】：

@nilay 您需要在this.autopostService.... 之前指定return。正确检查这两种方式。

是添加了返回但仍然没有调用服务方法。

@nilay 你能用你在编辑器中更改的代码更新你上面的问题吗？

@nilay 你能在这里做一个stackBlitz吗stackblitz.com