Angular, часть 4: создание отдельной страницы сведений о продукте Создать проект электронной коммерции Angular
создать страницу с одним продуктом показать продукт
Давайте создадим страницу сведений о продукте
Страница сведений о продукте
Вот пример того, как вы можете создать одну страницу продукта в приложении Angular:
- Создайте новый компонент для отдельной страницы продукта, назовем его
product-page.
single-product.component.html
В шаблоне компонента product-page (product-page.component.html) вы можете отобразить детали продукта с помощью объекта product.
<section class="container border border-info">
<!-- <h1>single-product</h1> -->
<div class="m-3 ">
<ng-container *ngFor="let product of product_list">
<div class="row" *ngIf="product !==undefined">
<div class="col-5 vertical-center">
<img src={{product.image_url}} alt={{product.title}} width="100%" height="auto">
</div>
<div class="col-6 vertical-center">
<div class="">
<h1>{{product.title | slice:0:100}}</h1>
<h4>Price : {{product.price}}</h4>
<h4>Rating : {{product.rating}}</h4>
<h4>Review : {{product.review}}</h4>
<button (click)="buyThis(product.link)" class="btn btn-warning px-5 shadow-lg rounded" ><strong>Buy Now</strong></button>
</div>
</div>
<div class="row my-2">
<ul class=" nav nav-pills justify-content-center " id="pills-tab" role="tablist">
<li class="nav-item mx-2 shadow-lg bg-white rounded" role="presentation">
<button class="active btn btn-outline-warning" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Description</button>
</li>
<li class="nav-item mx-2 shadow-lg bg-white rounded" role="presentation">
<button class="btn btn-outline-warning" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Write Review</button>
</li>
</ul>
</div>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active " id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<h3 class="text-center text-uppercase border border-warning">Description</h3>
<blockquote class="blockquote text-break">{{product.description}}</blockquote>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<h3 class="text-center text-uppercase border border-warning">Reviews</h3>
</div>
</div>
</div>
</ng-container>
</div>
</section>
<br/>
<br/>
один продукт.component.ts
В классе компонента product-page (product-page.component.ts) вы можете получить идентификатор продукта из параметров маршрута и использовать его для вызова API для получения сведений о продукте. Вы можете сделать это, внедрив ActivatedRoute в конструктор и используя snapshot.paramMap для извлечения идентификатора.
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProductModel } from '../models/product.model';
import { ProductService } from '../services/product.service';
@Component({
selector: 'app-single-product',
templateUrl: './single-product.component.html',
styleUrls: ['./single-product.component.css'],
providers:[ProductService]
})
export class SingleProductComponent implements OnInit {
product_list:ProductModel[]=[];
constructor(private http_api:ProductService,private route:ActivatedRoute) { }
ngOnInit(): void {
let id:number;
this.route.params.subscribe(params=>id=params['id'])
this.http_api.getSingleProduct(id).subscribe((data)=>this.product_list=data['result'])
console.log(this.product_list);
}
buyThis(url:any){
window.open(url)
}
}
В вашем файле product.service.ts вы должны создать новую функцию getProduct(id: string), которая будет обрабатывать вызов API для получения продукта по идентификатору.
позвонить в службу
Наконец, в файле app-routing.module.ts добавьте новый маршрут для компонента product-page и включите параметр для идентификатора продукта.
Это базовый пример, и вы можете настроить реализацию в соответствии с вашими потребностями. Вы можете добавить различные функции, такие как добавление продукта в корзину, отображение связанных продуктов и т. д.
Angular, часть 5: создание страницы корзины товаров в Angular и API URL | Создать EAccessoriesShop Angular
20 января 2023 г.
В целом"
Angular: создание списка продуктов и вызов API | Создать проект электронной коммерции Angular с вызовом API
16 января 2023 г.
В целом"
