QueryParams
QueryParams
წინა ქვეთავში ჩვენ მარტივი პარამეტრები გამოვიყენეთ, მაგრამ ეს განსხვავდება Query პარამეტრებისგან. მისი საშუალებით შეგვიძლია აპლიკაციის სთეითი, იგივე მდგომარეობა შევინახოთ მისამართში. ამ მაგალითში განვიხილავთ როგორ შეგვიძლია პროდუქტების სორტირების მიმართულება შევინახოთ QueryParams-ში.
ჩვენ ფაქტობრივად წინა თავის იდენტური აპლიკაცია გვაქვს, თუმცა
ყურადღებას მხოლოდ ერთ კომპონენტს მივაქცევთ: ProductsComponent
რომელიც იყენებს ProductsService
-ს რათა პროდუქტები განათავსოს სთეითში.
სერვისში ინახება პროდუქტების მასივი, რომლებსაც გააჩნიათ აიდი, სახელი, აღწერა, სურათი და ფასი. აქვე არსებობს მეთოდი ამ პროდუქტების მისაღებად.
import { Injectable } from "@angular/core";
import { Product } from "./product.model";
@Injectable({
providedIn: "root",
})
export class ProductsService {
private products: Product[] = [
{
id: 0,
name: "Lenovo ThinkPad T14",
price: 899,
description:
'Gen 2 14" FHD (Intel 4-Core i5-1135G7, 16GB RAM, 512GB SSD, UHD Graphics) IPS Business Laptop, Backlit, Fingerprint, 2 x Thunderbolt 4, Webcam, 3-Year Warranty, Windows 11 Pro ',
image: "https://example.com",
},
{
id: 1,
name: "Dell XPS 13 9310",
price: 1200,
description:
"Touchscreen Laptop - 13.4-inch UHD+ Display, Thin and Light, Intel Core i5-1135G7, 8GB LPDDR4x RAM, 512GB SSD, Intel Iris Xe, Killer Wi-Fi 6 with Dell Service, Win 11 Home - Silver ",
image: "https://example.com",
},
{
id: 2,
name: 'HP Envy 17.3"',
price: 1246,
description:
"FHD Touchscreen Laptop, Intel Core i7-1165G7, 64GB RAM, 2TB SSD, Backlit Keyboard, Intel Iris Xe Graphics, Fingerprint Reader, Webcam, Windows 11 Pro, Silver, 32GB USB Card ",
image: "https://example.com",
},
];
getAllProducts() {
return this.products;
}
getProductById(id: number) {
return this.products.find((product) => product.id === id);
}
}
პროდუქტის ინტერფეისი product.model.ts
-ში ასე გამოიყურება:
export interface Product {
id: number;
name: string;
description: string;
image: string;
price: number;
}
როუთინგი კონფიგურირებული გვაქვს, რომ თავიდანვე /products
გვერდზე გადავიდეთ
და გავხსნათ ProductsComponent
. ეს კომპონენტი ასე გამოიყურება:
import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { ProductsService } from "../products.service";
import { RouterLink } from "@angular/router";
import { Product } from "../product.model";
@Component({
selector: "app-products",
standalone: true,
imports: [CommonModule, RouterLink],
templateUrl: "./products.component.html",
styleUrl: "./products.component.css",
})
export class ProductsComponent {
products: Product[] = this.productsService.getAllProducts();
constructor(private productsService: ProductsService) {}
}
აპლიკაციის ინიციალიზაციის დროს ჩვენ პროდუქტების სიას ვიღებთ, და კომპონენტში ვინახავთ. ამ პროდუქტებს უბრალოდ თემფლეითში განვათავსებთ:
<div class="container">
<ul>
<li class="product" *ngFor="let product of products">
<h3>{{ product.name }}</h3>
<img [src]="product.image" [alt]="product.name" />
<p>{{ product.price | currency }}</p>
<a routerLink="/products/{{ product.id }}">Details</a>
</li>
</ul>
</div>
ჩვენი მიზანია, რომ მომხმარებელს პროდუქტების გაფილტვრის საშუალება მივცეთ.
ProductsComponent
-ში დავამატოთ შემდეგი თვისებები:
sortBy: 'cheapest' | 'expensive' = 'cheapest';
sortOptions = ['cheapest', 'expensive'];
ეს იქნება სორტირების მიმართულებები: ჯერ იაფი პროდუქტები გამოჩნდეს
თუ ძვირი. თავდაპირველად სორტირება cheapest
-ზე იქნება.
ასევე გვინდა სორტირების ვარიანტების მასივი, რომლითაც
ფორმას ავაგებთ.
კომპონენტის იმპორტებში შემოვიტანოთ FormsModule
რათა ფორმების
გამოყენება შევძლოთ:
import { FormsModule } from "@angular/forms";
@Component({
imports: [/* ... */ FormsModule],
})
ახლა უბრალოდ შევქმნათ select
ელემენტი NgModel
დირექტივით,
რომელსაც დავაკავშირებთ sortBy
თვისებასთან.
ngModelChange
არის ივენთი, რომელსაც ფორმის ელემენტი დააემითებს,
როცა მასში მომხმარებელი რამეს შეცვლის. ამ დროს გვინდა changeSort
მეთოდით რეაგირება, რომელსაც ტაიპსკრიპტის ნიმუშში ვნახავთ.
NgFor
დირექტივით
სორტირების ვარიანტები განვათავსოთ და მათი მნიშვნელობები მივაბათ
ელემენტს. ასევე ის ინტერპოლაციით გამოვსახოთ. დაკლიკებაზე უნდა
გააქტიურდეს მეთოდი, რომლითაც სორტირება მოხდება.
<div class="container">
<label for="sort-select">Sort by</label>
<select
id="sort-select"
[ngModel]="sortBy"
(ngModelChange)="changeSort($event)"
>
<option *ngFor="let sortOption of sortOptions" [value]="sortOption">
{{ sortOption }}
</option>
</select>
<ul>
<li class="product" *ngFor="let product of products">
<h3>{{ product.name }}</h3>
<img [src]="product.image" [alt]="product.name" />
<p>{{ product.price | currency }}</p>
<a routerLink="/products/{{ product.id }}">Details</a>
</li>
</ul>
</div>
შევქმნათ changeSort
მეთოდი. ჩვენ არსებულ სიას ასე პირდაპირ არაფერს
გავუკეთებთ. ჯერ უნდა მოხდეს ნავიგაცია, რომლის საფუძველზეც შეიცვლება
მისამართში query პარამეტრები და ჩვენ შემდგომ მასზე უნდა ვირეაგიროთ.
import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { ProductsService } from "../products.service";
import { ActivatedRoute, Router, RouterLink } from "@angular/router";
import { Product } from "../product.model";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { FormsModule } from "@angular/forms";
@Component({
selector: "app-products",
standalone: true,
imports: [CommonModule, RouterLink, FormsModule],
templateUrl: "./products.component.html",
styleUrl: "./products.component.css",
})
export class ProductsComponent {
sortBy: "cheapest" | "expensive" = "cheapest";
sortOptions = ["cheapest", "expensive"];
products: Product[] = [];
constructor(
private productsService: ProductsService,
private router: Router,
private route: ActivatedRoute
) {
this.route.queryParams
.pipe(takeUntilDestroyed())
.subscribe((queryParams) => {
const unsortedProducts = this.productsService.getAllProducts();
const sortBy = queryParams["sortBy"];
this.sortBy = sortBy;
this.products = this.sortProducts(unsortedProducts, sortBy);
});
}
sortProducts(products: Product[], sortBy: "cheapest" | "expensive") {
if (sortBy === "cheapest") {
return products.sort((a, b) => a.price - b.price);
} else {
return products.sort((a, b) => b.price - a.price);
}
}
changeSort(newSortBy: string) {
this.router.navigate(["products"], {
queryParams: { sortBy: newSortBy },
});
}
}
changeSort
მეთოდი იყენებს კომპონენტში დაინჯექტებული Router
-ის
ინსტანციას და მასზე უძახებს navigate
მეთოდს. ეს არის routerLink
-ის
მსგავსი ხელსაწყო, ოღონდ კლასში. პირველ არგუმენტად ეს მეთოდი იღებს
მისამართის ცალკეული ერთეულების მასივს. ჩვენ იმავე გვერდზე, prodocts
-ზე
გვინდა ნავიგაცია, უბრალოდ უნდა შევცვალოთ პარამეტრები. მეორე არგუმენტად
ფუნქცია იღებს კონფიგურაციის ობიექტს. აქ ერთ-ერთი თვისებაა queryParams
სადაც
შეგვიძლია პარამეტრების ობიექტის შექმნა, რომელსაც ანგულარი გარდასახავს
პარამეტრებში მისამართის სტრინგად.
აქ ჩენ შევქმენით sortBy
პარამეტრი, რომლის მნიშვნელობაც იქნება მომხმარებლის
მიერ არჩეული სორტირების მიმართულება. მისამართში ეს გამოჩნდება, როგორც
/products?sortBy=cheap
.
შემდეგ ჩვენ გვინდა ამ რაუთის ცვლილებაზე რეაგირება. სწორედ ამიტომ constructor
-ში
ვიყენებთ დაინჯექთებულ ActivatedRoute
-ს, რათა დავასუბსქრაიბოთ მასში არსებულ
queryParams
-ზე. ჩვენ პროდუქტების სიას ვინახავთ ლოკალურ ცვლადში და ასევე
queryParams
-იდან ვიღებთ ქოლბექში ხელმისაწვდომ პარამეტრების ობიექტს.
აქ ჩვენი შექმნილი პარამეტრის მნიშვნელობა შეგვიძლია ავიღოთ - sortBy
.
ჩვენ ამ სორტირების ვარიანტს კლასის თვისებაში ვანახლებთ, რათა
გვერდის დარეფრეშებაზე ფორმაში ისევ სწორი ვარიანტი იყოს არჩეული.
რაც მთავარია, ახლა სორტირების მიმართულების მიხედვით ვასორტირებთ
პროდუქტებს და მათ კლასის თვისებაში ვინახავთ.
სორტირებას ვაკეთებთ sortProducts
ფუნქციით. აქ პროდუქტებს და სორტირების
მიმართულებას ვიღებთ და ამის მიხედვით სათანადოდ სორტირებულ პროდუქტებს ვაბრუნებთ.
ზემოთხსენებული ლოგიკის გაშვება ngOnInit
-შიც არის შესაძლებელი, თუმცა
takeUntilDestroyed
-ის მარტივად გამოსაყენებლად იგივეს გაკეთება კონსტრუქტორშიც შეიძლება.
ყოველ ნავიგაციაზე queryParams
-ის საბსქრიფშენშში არსებული მეთოდი
აქტიურდება და ანახლებს:
- მიმდინარე სორტირების მიმართულება:
this.sortBy
, - პროდუქტების მასივს ამ სორტირების მიხედვით:
this.products
.
შედეგად შეგვიძლია პროდქტების სორტირება queryParams
-ით.
რა თქმა უნდა შესაძლებელია იმდენი queryParams
-ის შექმნა,
რამდენიც მოგვესურვება.
შეჯამება
ამ თავში ჩვენ ვისწავლეთ კლასში Router
-ის გამოყენება
queryParams
-ით და ActivatedRoute
-ზე queryParams
-ის
ცვლილებებზე რეაგირება. ჩვენ მომხმარებლის მიერ სორტირების მიმართულების
შეცვლის საფუძველზე ვახორციელებთ ნავიგაციას განახლებული queryParams
-ით.
queryParams
-ის ცვლილებას ამავე კომპონენტში ვუსმენთ და სათანადოდ
ვრეაგირებთ: ვანახლებთ სორტირების მიმართულებას და ვასორტირებთ პროდუქტების სიას.