Как я могу подключить свое приложение ioni c к двум разным URL-адресам API на одной странице? как передать идентификатор из данных первого URL-адреса на второй URL-адрес? - PullRequest
Новая
       138

Как я могу подключить свое приложение ioni c к двум разным URL-адресам API на одной странице? как передать идентификатор из данных первого URL-адреса на второй URL-адрес?

0 голосов
/ 30 мая 2020

Я создаю приложение рецептов ioni c, домашняя страница вызывает список имен рецептов, идентификаторов и изображений с использованием URL-адреса API, который www.forexample/recipeslist.com. Я хочу, чтобы я написал что-то который работает следующим образом: когда я нажимаю на название любого рецепта с той же страницы, я хочу, чтобы он направлял пользователя на страницу, содержащую детали рецепта, такие как ингредиенты, методы и т. д. c .. Эти данные будут вызывается с URL-адреса с именем www.forexample.com/recipedetails/ {id} Итак, я хочу, чтобы он взял идентификатор выбранного рецепта и добавил его к этому URL-адресу. Как мне это сделать? Как передать идентификатор из данных первого URL-адреса второму URL-адресу? Пожалуйста, помогите: (

Вот мой файл .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>

1 Ответ

0 голосов
/ 30 мая 2020

Сначала измените свой URL-адрес api на: 

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

Второе измените это: 

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

Третье измените это на главной странице получателей: 

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);
      });
  }
*
...