如何将我的 ionic 应用程序连接到同一页面中的两个不同的 API URL？ 如何将第一个 url 数据中的 id 传递给第二个 url？

Question

我正在构建一个离子食谱应用程序，主页正在使用 API url 调用食谱名称、ID 和图像列表，即 www.forexample/recipeslist.Z4D236D9A2D102C5FE6AD1C0DA4BEC0 我想要的是，我需要编写 smth，它的工作原理如下：当我从同一页面按下任何食谱名称时，我希望它将用户引导到包含该食谱详细信息（例如成分）的页面，方法等。这些详细信息将从名为 www.forexample.com/recipedetails/{id} 的 url 调用所以我希望它获取点击的食谱 ID 并将其添加到 url。 我该怎么做？ 如何将第一个 url 数据中的 ID 传递给第二个 URL？ 请帮忙：（

这是 my.service 文件：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { catchError, tap, map } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';


const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};

const apiUrl = "https://forexample.com/recipeslist";
@Injectable({
  providedIn: 'root'
})
export class ApiLandingRecipesService {

  constructor(private http: HttpClient) { }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    return throwError('Something bad happened; please try again later.');
  }

  private extractData(res: Response) {
    let body = res;
    return body || [] ; }

  getDataUser(): Observable<any> {
    return this.http.get(apiUrl, httpOptions).pipe(
      map(this.extractData),
      catchError(this.handleError));
  }


}

这是我的 homepage.ts 文件：

import { ApiLandingRecipesService} from '../api-landing-recipes.service'

@Component({
  selector: 'app-landing-page',
  templateUrl: './landing-page.page.html',
  styleUrls: ['./landing-page.page.scss'],
})
export class LandingPagePage implements OnInit {
  datauser: any[];
  constructor( public api: ApiLandingRecipesService) { }

  ngOnInit() {
    this.getDataUser();
  }
  async getDataUser() {
    await this.api.getDataUser()
      .subscribe(res => {
        console.log(res);
        this.datauser =res;
        console.log(this.datauser);
      }, err => {
        console.log(err);
      });
  }

这是我的主页。html 文件：

<ion-card-header *ngFor="let data of datauser"> 
<p> {{data.recipename}} </p> 
</ion-card-header>

Answer 1

首先将您的 api url 更改为：

const apiUrl = "https://forexample.com/";

第二个改变这个：

getDataUser(uri): Observable<any> {
    return this.http.get(apiUrl + uri, httpOptions).pipe(
      map(this.extractData),
      catchError(this.handleError));
  }

第三次在主recipies页面中更改它：

ngOnInit() {
    this.getDataUser();
  }

async getDataUser() {
    await this.api.getDataUser('recipeslist')
      .subscribe(res => {
        console.log(res);
        this.datauser =res;
        console.log(this.datauser);
      }, err => {
        console.log(err);
      });
  }

现在在 html 的接收更改为：

<ion-card-header *ngFor="let data of datauser" routerLink="/detailspage/{{data.recipeid}}"> 
<p> {{data.recipename}} </p> 
</ion-card-header>

现在在 app-routing.module.ts 添加这个：

{ path: 'details/:id', loadChildren: ...' }

现在在详细信息页面：

import { ActivatedRoute } from '@angular/router'; 
recordId = null;
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit() {
    this.recordId = this.activatedRoute.snapshot.paramMap.get('id');
    this.getDataUser(this.recordId);
  }

async getDataUser(recordId) {
    await this.api.getDataUser('recipeslist/' + recordId)
      .subscribe(res => {
        console.log(res);
        this.datauser =res;
        console.log(this.datauser);
      }, err => {
        console.log(err);
      });
  }

我放了不同的页面名称，因为我不明白你的 class 命名是主页（主页或收据或登陆），但我写 coupd 的方式对你来说更清楚。