Блог

Я новичок в Angular, и я пытаюсь создать простую страницу электронной коммерции, до сих пор я создавал домашнюю страницу, где я получаю из своего API продукты и показываю их только с такими данными, как название и цена, но API также возвращает множество других данных о каждом продукте. Итак, мне было интересно, какой лучший способ открыть по щелчку новую страницу со всеми подробностями об этом продукте.

Вот как я отображаю свои элементы

  <div *ngFor="let plu of filteredPlu" class="col mb-4">
      <figure class="card">
        <img
          [src]="
            plu.img
              ? 'data:image/jpg;base64,'   plu.img
              : 'assets/images/no_image.jpg'
          "
          class="img-fluid img-plu"
        />
        <figcaption class="card-body">
          <h6 class="card-title mb-0">
            <a href="#" appHref [routerLink]="['../item/'   plu.id]"> // ON CLICK WHICH SHOULD SHOW DETAILS
              {{ plu.desc ? plu.desc : "NO TITLE" }}
            </a>
          </h6>
          <small>{{ plu.estesa ? plu.estesa : "-" }}</small>
          <span class="price-wrap d-block">{{
            plu.prezzo | currency: "EUR"
          }}</span>
          <button
            class="btn btn-sm mr-2 btn-outline-dark mt-2"
            (click)="
              variantiModal
                ? openVarianti(variantiModal, plu)
                : addToCart(plu)
            "
          >
            Personalizza
          </button>
          <button
            class="btn btn-sm btn-outline-success mt-2"
            (click)="addToCart(plu)"
          >
            Aggiungi al carrello
          </button>
        </figcaption>
      </figure>
    </div>
  

Итак, как вы можете видеть, у меня есть привязка, которая перенаправляет пользователя в /items / component, компонент, где я должен показывать информацию об этом элементе..

Но мне было интересно, как я могу передать в /items / весь объект plu целиком, или я должен выполнить новый вызов API, чтобы получить информацию об одном продукте?

Если это может быть полезно, моя маршрутизация выглядит так:

 {
    path: 'negozio/:negozio',
    component: NegozioComponent,
    children: [
      {
        path: '',
        component: ModuliComponent,
      },
      {
        path: 'location',
        component: LocationComponent
      },
      {
        path: ':type',
        component: ProductsComponent, // products list is here
      },
      {
        path: 'item/:id',
        component: ItemComponent, // here i should show item details
      },
    ],
  },
  

И вот мой сервис, который возвращает элементы из API

 @Injectable({
  providedIn: 'root'
})
export class PluService {
  constructor(private http: HttpClient, private adapter: PluAdapter) { }

  plu(idNegozio: number, piva: string, lang: string): Observable<Plu[]>{
    return this.http
    .get(`${Globals.API_URL}/plu/${piva}/${idNegozio}`, {params: { lang }})
    .pipe(map((data: any[]) => data.map(item => this.adapter.adapt(item))));
  }
}
  

На странице сведений о продукте вам необходимо получить идентификатор продукта из параметра URL (у вас уже есть идентификатор продукта в параметре URL path path: 'item/:id' ).

И сделайте новый запрос GET для извлечения одного продукта, это единственный правильный способ добиться этого, вы не можете передать весь объект product целиком.

В вашем сервисе добавьте новый метод, который возвращает один продукт.

 pluDetails(idNegozio: number, piva: string, lang: string, id: number): Observable<Plu[]>{
 return this.http
.get(`${Globals.API_URL}/plu/${piva}/${idNegozio}/${id}`, {params: { lang }})
...
}
  

На странице сведений о товаре / продукте получите параметр id из URL и выполните новый вызов.

 constructor(private route: ActivatedRoute, private: service: PluService) {
  this.productId = this.route.snapshot.params['id'];
}

productDetails() {
 const productDetails =  this.service.pluDetails(idNegozio, piva, this.productId)
}