如何在 angular 7 中激活 link 中获取 url 参数并从服务 class 中调用剩余 api

Question

我想使用 Get 参数使用 id 字段获取数据。 Follwing 是我的 html url 代码，它重定向到特定页面但不调用服务来获取其余 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)
    );
  }

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

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'))
    })
    );
  }
}

下面是我的 class 文件

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

Answer 1

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

的使用

目前-

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

代码指令this.autopostService.getcarDetail(params.get('id')) 如果使用箭头函数[=]，应该与swtichMap()在同一行 31=] 或明确的 return 语句需要被提及，如果你要打破这一行。

正确的方法-

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

或

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

如何在 angular 7 中激活 link 中获取 url 参数并从服务 class 中调用剩余 api

How to get url parameter in activated link in angular 7 and call rest api from service class

json

typescript

angular-ui-router

angular

angular7