Lasst uns mit der Erstellung eines Formulars für die Suche nach Tickets und Unterkünften fortfahren.
Sehen wir uns ein Beispiel auf der Website an – travel.alfabank.ru
Die folgenden Felder werden dort angezeigt:
Bei der Suche nach Flugtickets werden alle Felder angezeigt, bei der Auswahl eines Hotels nur ein Teil davon.
Es ist unmöglich, Unterkünfte an verschiedenen Orten zu buchen (dies ist ein so unflexibles System, obwohl dies in Airbnb vorgesehen ist).
Lassen Sie uns einen Abschnitt src/search erstellen, in dem wir alles speichern, was mit der Suche zu tun hat.
Fügen wir ein paar Schnittstellen hinzu:
export interface SearchDestination {
readonly [key: string]: unknown;
readonly id: string;
readonly type: string;
readonly code: string;
readonly name: string;
readonly country_name: string;
readonly city_name: string;
readonly value: string; // ???
}
export interface SearchFieldOptions {
readonly [key: string]: unknown;
readonly id: string;
readonly label: string;
readonly name?: string;
readonly placeholder?: string;
}
export type SearchFormOptions<T> = {
readonly [P in keyof T]: SearchFieldOptions;
};
export function getSearchQueryParams(
form: Readonly<Record<string, string | number | boolean | Record<string, unknown>>>,
): Record<string, unknown> {
const params: Record<string, unknown> = {};
for (const [key, value] of Object.entries(form)) {
if (!!value && typeof value === 'object') {
params[key] = 'value' in value ? value['value'] : undefined;
} else {
params[key] = value;
}
}
return params;
}
Beginnen wir mit der Implementierung des Formulars mit der Suche nach Flugtickets, da dies den gesamten Satz an Feldern umfasst.
Erstellen Sie den Avia-Bereich:
mkdir src/app/search/avia mkdir src/app/search/avia/common mkdir src/app/search/avia/common/lib echo >src/app/search/avia/common/index.ts
Schnittstellen hinzufügen:
import { castQueryParams } from '@baf/core';
export interface SearchDeclination {
readonly vi: string;
readonly tv: string;
readonly su: string;
readonly ro: string;
readonly pr: string;
readonly da: string;
}
export interface SearchCityOrAirportDTO {
readonly id: string;
readonly type: string;
readonly code: string;
readonly name: string;
readonly country_code: string;
readonly country_name: string;
readonly city_name?: string;
readonly state_code: string | null;
readonly coordinates: {
readonly lon: number;
readonly lat: number;
};
readonly index_strings: unknown[];
readonly weight: number;
readonly cases: SearchDeclination | null;
readonly country_cases: SearchDeclination | null;
readonly main_airport_name: string | null;
}
export interface SearchFlightOptions {
readonly [key: string]: unknown;
readonly currency: string;
readonly origin: string;
readonly destination: string;
readonly departure_at: string;
readonly return_at?: string;
readonly one_way?: string;
readonly direct?: boolean;
readonly unique?: boolean;
readonly limit?: number;
readonly page?: number;
readonly soring?: string;
readonly token: string;
}
export interface SearchFlight {
readonly origin: string;
readonly destination: string;
readonly origin_airport: string;
readonly destination_airport: string;
readonly price: number;
readonly airline: string;
readonly flight_number: string;
readonly departure_at: string;
readonly return_at: string;
readonly transfers: number;
readonly return_transfers: number;
readonly duration: number;
readonly duration_to: number;
readonly duration_back: number;
readonly link: string;
}
export interface SearchFlightResponse {
readonly success: boolean;
readonly data: SearchFlight[];
readonly currency: string;
}
export interface SearchAviaLine {
readonly origin: string;
readonly originName: string;
readonly destination: string;
readonly destinationName: string;
readonly duration: number;
readonly departureAt: string;
readonly arriveAt: string;
readonly transfers: number;
}
export function getSearchFlightOptions(queryParams: Record<string, unknown>, token: string, currency: string): SearchFlightOptions {
const { from, to, direct, startDate, endDate } = castQueryParams(queryParams);
if (
typeof from !== 'string' ||
typeof to !== 'string' ||
(typeof direct !== 'boolean' && typeof direct !== 'undefined') ||
typeof startDate !== 'string' ||
(typeof endDate !== 'string' && typeof endDate !== 'undefined')
) {
throw new Error('Invalid search flight options');
}
return {
origin: from,
destination: to,
direct,
currency: currency.toLowerCase(),
departure_at: startDate,
return_at: endDate,
token,
sorting: 'price',
};
}
Jetzt definieren wir das Formular selbst:
import { FormControl, FormGroup, Validators } from '@angular/forms';
import type { FormFor } from '@baf/core';
import type { SearchDestination } from '@baf/search/common';
export interface SearchAviaForm {
readonly from: string | SearchDestination;
readonly to: string | SearchDestination;
readonly startDate: string;
readonly endDate: string;
readonly passengers: number;
}
export type SearchAviaFormGroup = FormGroup<FormFor<SearchAviaForm>>;
export const initialSearchAviaFormGroup: SearchAviaFormGroup = new FormGroup({
from: new FormControl<string | SearchDestination>('', {
nonNullable: true,
validators: [Validators.required],
}),
to: new FormControl<string | SearchDestination>('', {
nonNullable: true,
validators: [Validators.required],
}),
startDate: new FormControl<string>('', {
nonNullable: true,
validators: [Validators.required],
}),
endDate: new FormControl<string>('', {
nonNullable: true,
validators: [],
}),
passengers: new FormControl<number>(1, {
nonNullable: true,
validators: [Validators.required, Validators.min(1), Validators.max(20)],
}),
});
Und außerdem definieren wir Filter:
import { FormControl, FormGroup } from '@angular/forms';
import type { FormFor } from '@baf/core';
export interface SearchAviaFilters {
readonly baggage: boolean;
readonly direct: boolean;
}
export type SearchAviaFiltersGroup = FormGroup<FormFor<SearchAviaFilters>>;
export const initialSearchAviaFiltersGroup: SearchAviaFiltersGroup = new FormGroup({
baggage: new FormControl(false, { nonNullable: true, validators: [] }),
direct: new FormControl(false, { nonNullable: true, validators: [] }),
});
SearchAviaFilters – verfügbare Werte;
SearchAviaFiltersGroup – eckige reaktive Form;
initialSearchAviaFiltersGroup – Anfangszustand.
Fügen Sie einen Abschnitt „Suche/Avia/Dienste“ hinzu, der Dienste für den Zugriff auf die externe API enthält:
mkdir src/app/search/avia/services mkdir src/app/search/avia/services/lib echo >src/app/search/avia/services/index.ts
Implementierung:
import { HttpClient } from '@angular/common/http';
import { DEFAULT_CURRENCY_CODE, inject, Injectable, TransferState } from '@angular/core';
import type { Observable } from 'rxjs';
import { map } from 'rxjs';
import type { Environment } from '@baf/core';
import { castParams, ENV_DEFAULT, ENV_KEY } from '@baf/core';
import type { SearchFlight, SearchFlightResponse } from '@baf/search/avia/common';
import { getSearchFlightOptions } from '@baf/search/avia/common';
@Injectable()
export class SearchAviaService {
private readonly httpClient = inject(HttpClient);
private readonly environment = inject(TransferState).get<Environment>(ENV_KEY, ENV_DEFAULT);
private readonly currency = inject(DEFAULT_CURRENCY_CODE);
findFlights(queryParams: Record<string, unknown>): Observable<SearchFlight[]> {
const params = castParams(getSearchFlightOptions(queryParams, this.environment.aviasalesToken, this.currency));
return this.httpClient.get<SearchFlightResponse>('/api/aviasales/v3/prices_for_dates', { params }).pipe(map(({ data }) => data));
}
}
SearchAviaService enthält nur eine Methode – findFlights:
Für die lokale Entwicklung müssen Sie einen Proxy konfigurieren.
Dotenv installieren:
yarn add -D dotenv
Dann in main.server.ts durch Verbinden von env:
import { bootstrapApplication } from '@angular/platform-browser';
import dotenv from 'dotenv';
import { AppComponent } from './app/app.component';
import { config } from './app/app.config.server';
dotenv.config();
const bootstrap = () => bootstrapApplication(AppComponent, config);
export default bootstrap;
Proxy.config.json erstellen:
{
"/api/autocomplete": {
"target": "https://autocomplete.travelpayouts.com",
"secure": false,
"pathRewrite": {
"^/api/autocomplete": ""
},
"changeOrigin": true
},
"/api/aviasales": {
"target": "https://api.travelpayouts.com",
"secure": false,
"pathRewrite": {
"^/api": ""
},
"changeOrigin": true
},
"/api/hotels": {
"target": "https://engine.hotellook.com/api/v2",
"secure": false,
"pathRewrite": {
"^/api/hotels": ""
},
"changeOrigin": true
}
}
In angle.json schreiben wir ProxyConfig:
{
...,
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"proxyConfig": "src/proxy.conf.json"
}
}
}
In app.config.server.ts werden wir envs verbinden:
export const config = mergeApplicationConfig(envConfig, appConfig, serverConfig);
Im Stammverzeichnis des Projekts fügen wir .env mit den folgenden Tokens hinzu:
AVIASALES_TOKEN=YourTokenForTravelPayouts HOTELLOOK_TOKEN=YourTokenForTravelPayouts
Lassen Sie uns starten und testen.
Sie können Variablen in der Konsole anzeigen.
Für die Produktion habe ich einen Proxy basierend auf dem Knotenserver hinzugefügt
server.ts:
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { createProxyMiddleware } from 'http-proxy-middleware';
import { dirname, join, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import bootstrap from './src/main.server';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const locale = serverDistFolder.split('/').at(-1) ?? '';
const browserDistFolder = resolve(serverDistFolder, '../../browser', locale);
const indexHtml = join(serverDistFolder, 'index.server.html');
const commonEngine = new CommonEngine();
// Note: Don't use in production! For tutorial only...
server.use(
'/api/autocomplete',
createProxyMiddleware({
target: 'https://autocomplete.travelpayouts.com',
changeOrigin: true,
secure: false,
pathRewrite: {
'^/api/autocomplete': '',
},
}),
);
server.use(
'/api/aviasales',
createProxyMiddleware({
target: 'https://api.travelpayouts.com/aviasales',
secure: false,
pathRewrite: {
'^/api/aviasales': '',
},
changeOrigin: true,
}),
);
server.use(
'/api/hotels',
createProxyMiddleware({
target: 'https://engine.hotellook.com/api/v2',
secure: false,
pathRewrite: {
'^/api/hotels': '',
},
changeOrigin: true,
}),
);
server.set('view engine', 'html');
server.set('views', browserDistFolder);
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get(
'**',
express.static(browserDistFolder, {
maxAge: '1y',
index: 'index.html',
}),
);
// All regular routes use the Angular engine
server.get('**', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;
commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});
return server;
}
function run(): void {
const port = process.env['PORT'] || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
run();
Wie Sie dem Beispiel entnehmen können, verwende ich http-proxy-middleware.
Da alle Formen ähnlich sind, erstellen wir gemeinsame Komponenten, um sie zu implementieren.
Felder generieren:
mkdir src/app/search/ui mkdir src/app/search/ui/fields mkdir src/app/search/ui/fields/lib echo >src/app/search/ui/fields/index.ts
Wir benötigen die folgenden Kontrollen:
Также 2 специальных компонента:
Запустим команду:
yarn ng g c search-date
В разметку добавим datepicker:
<baf-datepicker [control]="control()" [options]="options()"></baf-datepicker>
Немного стилей:
@use 'src/stylesheets/device' as device;
:host {
width: 100%;
&.is-hide {
display: none;
}
&.is-start-date.is-valid {
border-right: 1px solid var(--md-sys-color-background);
}
@include device.media-web() {
&.is-hide {
display: flex;
flex-grow: 1;
}
&.is-start-date,
&.is-start-date.is-valid {
border-left: 1px solid var(--md-sys-color-background);
border-right: 1px solid var(--md-sys-color-background);
}
&.is-end-date {
border-right: 1px solid var(--md-sys-color-background);
}
}
}
Реализация самого компонента достаточно тривиальна.
import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
import type { FormControl } from '@angular/forms';
import { camelCaseToHumanize, ExtraClassService } from '@baf/core';
import type { SearchFieldOptions } from '@baf/search/common';
import type { DatepickerOptions } from '@baf/ui/datepicker';
import { DatepickerComponent } from '@baf/ui/datepicker';
export interface SearchDateOptions extends SearchFieldOptions {
readonly startDate?: FormControl<string>;
}
@Component({
selector: 'baf-search-date',
standalone: true,
imports: [DatepickerComponent],
templateUrl: './search-date.component.html',
styleUrl: './search-date.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [ExtraClassService],
})
export class SearchDateComponent {
private readonly extraClassService = inject(ExtraClassService);
readonly control = input.required<FormControl<string>, FormControl<string>>({
transform: (value) => {
this.extraClassService.register('valid', value.valueChanges, () => {
this.extraClassService.patch('is-valid', value.valid);
});
return value;
},
});
readonly options = input.required<DatepickerOptions, SearchDateOptions>({
transform: (value) => {
this.extraClassService.update('options', value.id ? `is-${camelCaseToHumanize(value.id)}` : '');
if (value.startDate) {
this.extraClassService.register('invalid', value.startDate.valueChanges, () => {
this.extraClassService.patch('is-hide', !!value.startDate?.invalid);
});
}
return {
...value,
mask: '00.00.0000',
maskTo: (val: string) => {
const [year, month, day] = val.split('-');
return `${day}.${month}.${year}`;
},
maskForm: (val: string) => {
const [day, month, year] = val.split('.');
return `${year}-${month}-${day}`;
},
};
},
});
}
Отмечу, что ExtraClassService используется только для того, чтобы не прибегать к HostBinding. Я все экспериментирую с автоматизацией стилизации. Но видимо, это не самое удачное решение.
Создадим место назначения:
yarn ng g c search-destination
Шаблон:
<baf-autocomplete [control]="control()" [options]="options()" [data]="data$"></baf-autocomplete>
Немного стилей:
@use 'src/stylesheets/device' as device;
:host {
width: 100%;
&.is-from {
border-bottom: 1px solid var(--md-sys-color-background);
}
@include device.media-web() {
&.is-from {
border-bottom: none;
}
}
}
Реализация компонента сложнее даты:
import type { OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, DestroyRef, inject, input } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import type { FormControl } from '@angular/forms';
import { BehaviorSubject, debounceTime, EMPTY, of, switchMap, tap } from 'rxjs';
import { ExtraClassService, toClass } from '@baf/core';
import type { SearchDestination, SearchFieldOptions } from '@baf/search/common';
import type { AutocompleteOptions } from '@baf/ui/autocomplete';
import { AutocompleteComponent } from '@baf/ui/autocomplete';
import { InputComponent } from '@baf/ui/input';
import { SearchDestinationService } from './search-destination.service';
export interface SearchDestinationOptions extends SearchFieldOptions {
readonly types?: string[];
readonly key?: string;
}
@Component({
selector: 'baf-search-destination',
standalone: true,
imports: [InputComponent, AutocompleteComponent],
templateUrl: './search-destination.component.html',
styleUrl: './search-destination.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [ExtraClassService, SearchDestinationService],
})
export class SearchDestinationComponent implements OnInit {
private readonly destroyRef = inject(DestroyRef);
private readonly searchDestinationService = inject(SearchDestinationService);
private readonly extraClassService = inject(ExtraClassService);
readonly control = input.required<FormControl<string | SearchDestination>>();
readonly options = input.required<AutocompleteOptions & SearchDestinationOptions, SearchDestinationOptions>({
transform: (options) => {
this.extraClassService.update('options', toClass(options.id));
return {
...options,
key: options.key ?? 'code',
displayFn: (item: SearchDestination) => {
return `${item.name}, ${item.code}<br>${item.country_name}, ${item.city_name ?? item.name}`;
},
inputDisplayFn: (item: SearchDestination | string) => {
if (!item) {
return '';
}
if (typeof item === 'string') {
return item;
}
return `${item.name}, ${item.code}`;
},
};
},
});
readonly data$ = new BehaviorSubject<SearchDestination[]>([]);
ngOnInit(): void {
this.control()
.valueChanges.pipe(
debounceTime(300),
switchMap((query) => {
if (!query) {
return of([]);
}
if (typeof query !== 'string') {
return EMPTY;
}
return this.searchDestinationService.findDestination(query, this.options().key, this.options().types);
}),
tap((response) => this.data$.next(response.slice(0, 6))),
takeUntilDestroyed(this.destroyRef),
)
.subscribe();
}
}
Также имеем два инпута: control и options. Однако, есть реактивное свойство - data$, который представляет собой массив мест назначения, полученный из API.
Добавим SearchDestinationService:
import { HttpClient } from '@angular/common/http';
import { inject, Injectable, LOCALE_ID } from '@angular/core';
import type { Observable } from 'rxjs';
import { map } from 'rxjs';
import type { SearchDestination } from '@baf/search/common';
@Injectable()
export class SearchDestinationService {
private readonly httpClient = inject(HttpClient);
private readonly localeId = inject(LOCALE_ID);
findDestination(term: string, key: string, types?: string[]): Observable<SearchDestination[]> {
const withTypes = types?.length ? `&${types.map((type) => `types[]=${type}`).join('&')}` : '';
return this.httpClient.get<SearchDestination[]>(`/api/autocomplete/places2?locale=${this.localeId}${withTypes}&term=${term}`).pipe(
map((result) =>
result.map((item) => ({
...item,
value: item[key as 'code' | 'name'],
})),
),
);
}
}
Сервис имеет всего один метод - findDestination, который возвращает список городов или аэропортов.
Если посмотреть реализацию, то можно увидеть, что при вводе названия вызывается findDestination:
ngOnInit(): void {
this.control()
.valueChanges.pipe(
debounceTime(300),
switchMap((query) => {
if (!query) {
return of([]);
}
if (typeof query !== 'string') {
return EMPTY;
}
return this.searchDestinationService.findDestination(query, this.options().key, this.options().types);
}),
tap((response) => this.data$.next(response.slice(0, 6))),
takeUntilDestroyed(this.destroyRef),
)
.subscribe();
}
Важно, для работы API сначала нужно настроить прокси, так как используемое мной API будет резать запросы по CORS. Как это обойти расскажу ниже.
Добавим смену места.
Для этого создадим новый компонент:
yarn ng g c search-reverse
В шаблоне выведем кнопку с иконкой:
<button baf-icon-button type="button" (click)="onReverse()" i18n-aria-label="Search Field|Swap" aria-label="Swap"><baf-sync-alt /></button>
Немного стилей:
@use 'src/stylesheets/device' as device;
:host {
position: absolute;
top: 0;
right: 0;
z-index: 100;
@include device.media-web() {
position: relative;
top: initial;
right: initial;
background-color: var(--md-sys-color-surface-variant);
color: var(--md-sys-color-on-surface-variant);
display: flex;
border-left: 1px solid var(--md-sys-color-background);
border-right: 1px solid var(--md-sys-color-background);
button {
display: flex;
align-items: center;
height: 3rem;
}
}
}
button {
line-height: 1;
}
Реализация очень тривиальна:
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import type { FormGroup } from '@angular/forms';
import { IconButtonComponent } from '@baf/ui/buttons';
import { SyncAltComponent } from '@baf/ui/icons';
@Component({
selector: 'baf-search-reverse',
standalone: true,
imports: [SyncAltComponent, IconButtonComponent],
templateUrl: './search-reverse.component.html',
styleUrl: './search-reverse.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchReverseComponent {
readonly form = input.required<FormGroup>();
onReverse(): void {
const { from, to } = this.form().getRawValue();
if (from && to) {
this.form().patchValue({ from: to, to: from }, { emitEvent: false });
}
}
}
Просто при клике меняем места назначения.
Контрол для количества пассажиров:
yarn ng g c search-passengers
Макет:
<baf-input-control>
<label baf-label [attr.for]="options().id">{{ options().label }}</label>
<input [id]="options().id" baf-input type="number" [formControl]="control()" [placeholder]="options().placeholder ?? ''" />
</baf-input-control>
Логика:
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import type { FormControl } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import type { SearchFieldOptions } from '@baf/search/common';
import { InputComponent, InputControlComponent } from '@baf/ui/input';
import { LabelComponent } from '@baf/ui/label';
export type SearchPassengersOptions = SearchFieldOptions;
@Component({
selector: 'baf-search-passengers',
standalone: true,
imports: [ReactiveFormsModule, InputComponent, InputControlComponent, LabelComponent],
templateUrl: './search-passengers.component.html',
styleUrl: './search-passengers.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchPassengersComponent {
readonly control = input.required<FormControl<number | undefined>>();
readonly options = input.required<SearchPassengersOptions>();
}
yarn ng g c search-group
Суть всего компонента в получении mode и задания соответствующего класса:
import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
import { ExtraClassService, toClass } from '@baf/core';
export type SearchGroupType = 'destination' | 'date' | 'line' | 'submit' | 'single' | undefined;
@Component({
selector: 'baf-search-group',
standalone: true,
imports: [],
template: '<ng-content/>',
styleUrl: './search-group.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [ExtraClassService],
})
export class SearchGroupComponent {
private readonly extraClassService = inject(ExtraClassService);
readonly mode = input<SearchGroupType, SearchGroupType>(undefined, {
transform: (value) => {
this.extraClassService.update('mode', toClass(value));
return value;
},
});
}
Сами стили:
@use 'src/stylesheets/device' as device;
:host {
display: flex;
flex-direction: column;
position: relative;
flex-grow: 1;
&.is-date {
flex-direction: row;
}
&.is-single {
flex-grow: 100;
}
&.is-line {
flex-direction: row;
gap: 1rem;
}
@include device.media-web() {
flex-direction: row;
&.is-line {
gap: 0;
}
&.is-submit {
gap: 0;
margin-left: 1rem;
}
}
}
После того как были созданы все поля, можно реализовать форму.
mkdir src/app/search/ui/form mkdir src/app/search/ui/form/lib echo >src/app/search/ui/form/index.ts
Запустим команду:
yarn ng g c search-group
В шаблон вставим содержимое:
<form [formGroup]="form()" (ngSubmit)="onSubmit()">
<ng-content />
<baf-search-group mode="submit">
<button baf-button bafMode="primary" bafWidth="max" type="submit" i18n="Search Form|Find">Find</button>
</baf-search-group>
</form>
Немного стилей:
@use 'src/stylesheets/device' as device;
form {
display: flex;
flex-direction: column;
gap: 1rem;
@include device.media-web() {
flex-direction: row;
gap: 0;
}
}
Сама форма:
import type { OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, DestroyRef, inject, input, output } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import type { FormGroup } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { tap } from 'rxjs';
import type { PathValues } from '@baf/core';
import { castQueryParams, getRoute } from '@baf/core';
import { getSearchQueryParams } from '@baf/search/common';
import { SearchGroupComponent } from '@baf/search/ui/fields';
import { ButtonComponent } from '@baf/ui/buttons';
@Component({
selector: 'baf-search-form',
standalone: true,
imports: [SearchGroupComponent, ButtonComponent, ReactiveFormsModule],
templateUrl: './search-form.component.html',
styleUrl: './search-form.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchFormComponent implements OnInit {
private readonly router = inject(Router);
private readonly activatedRoute = inject(ActivatedRoute);
private readonly destroyRef = inject(DestroyRef);
readonly form = input.required<FormGroup>();
readonly redirectTo = input.required<PathValues>();
readonly submitted = output();
ngOnInit(): void {
this.activatedRoute.queryParams
.pipe(
tap((queryParams) => {
const formData = castQueryParams(queryParams, Object.keys(this.form().controls));
if (Object.keys(formData).length) {
this.form().patchValue(formData);
}
}),
takeUntilDestroyed(this.destroyRef),
)
.subscribe();
}
onSubmit(): void {
this.form().markAllAsTouched();
if (this.form().invalid) {
return;
}
this.submitted.emit();
// Note: Auto redirect
void this.router.navigate(getRoute(this.redirectTo()), {
queryParams: getSearchQueryParams({ ...this.activatedRoute.snapshot.queryParams, ...this.form().getRawValue() }),
});
}
}
Форма добавляет общий метод отправки и после инициализации компонента заполняется данными.
this.activatedRoute.queryParams
.pipe(
tap((queryParams) => {
const formData = castQueryParams(queryParams, Object.keys(this.form().controls));
if (Object.keys(formData).length) {
this.form().patchValue(formData);
}
}),
takeUntilDestroyed(this.destroyRef),
)
.subscribe();
После клика произойдет перенаправление на указанный путь:
this.form().markAllAsTouched();
if (this.form().invalid) {
return;
}
this.submitted.emit();
// Note: Auto redirect
void this.router.navigate(getRoute(this.redirectTo()), {
queryParams: getSearchQueryParams({
...this.activatedRoute.snapshot.queryParams,
...this.form().getRawValue()
}),
});
Последним шагом добавим форму фильтров:
mkdir src/app/search/ui/filters mkdir src/app/search/ui/filters/lib echo >src/app/search/ui/filters/index.ts
Запустим команду:
yarn ng g c search-filters
Шаблон:
<baf-card>
<ng-content />
<button type="button" baf-button bafMode="primary" bafSize="medium" bafWidth="max" i18n="Search Filters|Apply" (click)="onApply()">
Apply
</button>
<button type="button" baf-button bafMode="tertiary" bafSize="medium" bafWidth="max" i18n="Search Filters|Reset" (click)="onReset()">
Reset
</button>
</baf-card>
Немного стилей:
@use 'src/stylesheets/device' as device;
form {
display: flex;
flex-direction: column;
gap: 1rem;
@include device.media-web() {
flex-direction: row;
gap: 0;
}
}
Логика схожа с работой ранее созданной формы:
import type { OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, DestroyRef, inject, input, output } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import type { FormGroup } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { tap } from 'rxjs';
import type { PathValues } from '@baf/core';
import { castQueryParams, getRoute } from '@baf/core';
import { getSearchQueryParams } from '@baf/search/common';
import { SearchGroupComponent } from '@baf/search/ui/fields';
import { ButtonComponent } from '@baf/ui/buttons';
@Component({
selector: 'baf-search-form',
standalone: true,
imports: [SearchGroupComponent, ButtonComponent, ReactiveFormsModule],
templateUrl: './search-form.component.html',
styleUrl: './search-form.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchFormComponent implements OnInit {
private readonly router = inject(Router);
private readonly activatedRoute = inject(ActivatedRoute);
private readonly destroyRef = inject(DestroyRef);
readonly form = input.required<FormGroup>();
readonly redirectTo = input.required<PathValues>();
readonly submitted = output();
ngOnInit(): void {
this.activatedRoute.queryParams
.pipe(
tap((queryParams) => {
const formData = castQueryParams(queryParams, Object.keys(this.form().controls));
if (Object.keys(formData).length) {
this.form().patchValue(formData);
}
}),
takeUntilDestroyed(this.destroyRef),
)
.subscribe();
}
onSubmit(): void {
this.form().markAllAsTouched();
if (this.form().invalid) {
return;
}
this.submitted.emit();
// Note: Auto redirect
void this.router.navigate(getRoute(this.redirectTo()), {
queryParams: getSearchQueryParams({ ...this.activatedRoute.snapshot.queryParams, ...this.form().getRawValue() }),
});
}
}
При изменении любого значения идет редирект:
onApply(): void {
void this.router.navigate([], {
queryParams: {
...this.activatedRoute.snapshot.queryParams,
refresh: new Date().toISOString(),
},
});
}
refresh - это костыль. Используется как изменение в пути и запуска релоада страницы.
Сброс обнуляет все выбранные фильтры:
onReset(): void {
this.form().reset();
}
Перейдем к созданию формы поиска авиабилетов.
mkdir src/app/search/avia/ui mkdir src/app/search/avia/ui/form mkdir src/app/search/avia/ui/form/lib echo >src/app/search/avia/ui/form/index.ts
Добавим компонент:
yarn ng g c search-avia-form
Опишем форму SearchAviaFormComponent:
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { PATHS } from '@baf/core';
import type { SearchAviaForm } from '@baf/search/avia/common';
import { initialSearchAviaFormGroup } from '@baf/search/avia/common';
import type { SearchFormOptions } from '@baf/search/common';
import {
SearchDateComponent,
SearchDestinationComponent,
SearchGroupComponent,
SearchPassengersComponent,
SearchReverseComponent,
} from '@baf/search/ui/fields';
import { SearchFormComponent } from '@baf/search/ui/form';
import { ButtonComponent } from '@baf/ui/buttons';
@Component({
selector: 'baf-search-avia-form',
standalone: true,
imports: [
SearchFormComponent,
SearchGroupComponent,
SearchDestinationComponent,
SearchReverseComponent,
SearchDateComponent,
SearchPassengersComponent,
ButtonComponent,
],
templateUrl: './search-avia-form.component.html',
styleUrl: './search-avia-form.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchAviaFormComponent {
readonly form = initialSearchAviaFormGroup;
readonly redirectTo = PATHS.searchAvia;
readonly name = 'city_name';
readonly options: SearchFormOptions<SearchAviaForm> = {
from: { label: $localize`:Search Field:Where from`, id: 'from', types: ['city', 'airport'] },
to: { label: $localize`:Search Field:Where to`, id: 'to', types: ['city', 'airport'] },
startDate: { label: $localize`:Search Field:When`, id: 'startDate' },
endDate: { label: $localize`:Search Field:When back`, id: 'endDate', startDate: this.form.controls.startDate },
passengers: { label: $localize`:Search Field:Passengers`, id: 'passengers' },
};
}
Вывдем все:
<baf-search-form [redirectTo]="redirectTo" [form]="form">
<baf-search-group mode="destination">
<baf-search-destination [control]="form.controls.from" [options]="options.from" />
<baf-search-reverse [form]="form" />
<baf-search-destination [control]="form.controls.to" [options]="options.to" />
</baf-search-group>
<baf-search-group mode="line">
<baf-search-group mode="date">
<baf-search-date [control]="form.controls.startDate" [options]="options.startDate" />
<baf-search-date [control]="form.controls.endDate" [options]="options.endDate" />
</baf-search-group>
<baf-search-passengers [control]="form.controls.passengers" [options]="options.passengers" />
</baf-search-group>
</baf-search-form>
Как можно заметить, вся бизнес логика скрыта в дочерних компонентах.
SearchAviaFormComponent представляет собой конфиг формы.
По аналогии создадим фильтры авиабилетов.
mkdir src/app/search/avia/ui/filters mkdir src/app/search/avia/ui/filters/lib echo >src/app/search/avia/ui/filters/index.ts
Запустим команду:
yarn ng g c search-filters-avia
Зададим требуемые настройки:
import { ChangeDetectionStrategy, Component } from '@angular/core';
import type { SearchAviaFilters } from '@baf/search/avia/common';
import { initialSearchAviaFiltersGroup } from '@baf/search/avia/common';
import type { SearchFormOptions } from '@baf/search/common';
import { SearchFiltersComponent } from '@baf/search/ui/filters';
import { FilterBaggageComponent } from './filter-baggage/filter-baggage.component';
import { FilterDirectComponent } from './filter-direct/filter-direct.component';
@Component({
selector: 'baf-search-filters-avia',
standalone: true,
imports: [SearchFiltersComponent, FilterBaggageComponent, FilterDirectComponent],
templateUrl: './search-filters-avia.component.html',
styleUrl: './search-filters-avia.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchFiltersAviaComponent {
readonly form = initialSearchAviaFiltersGroup;
readonly options: SearchFormOptions<SearchAviaFilters> = {
baggage: { label: $localize`:Search Filter:Baggage`, id: 'baggage', name: 'baggage' },
direct: { label: $localize`:Search Filter:Direct`, id: 'direct', name: 'direct' },
};
}
И шаблон:
<baf-search-filters [form]="form"> <baf-filter-baggage [control]="form.controls.baggage" [options]="options.baggage" /> <baf-filter-direct [control]="form.controls.direct" [options]="options.direct"/> </baf-search-filters>
Из примера видно, что выводятся просто фильтры списком. Как и в случае с основной формой, вся логика вынесена в дочерние компоненты.
Пример фильтра:
<baf-checkbox [control]="control()" [options]="options()">{{ options().label }}</baf-checkbox>
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import type { FormControl } from '@angular/forms';
import { ExtractChangesDirective } from '@baf/core';
import type { SearchFieldOptions } from '@baf/search/common';
import { CheckboxComponent } from '@baf/ui/checkbox';
export type FilterDirectOptions = SearchFieldOptions;
@Component({
selector: 'baf-filter-direct',
standalone: true,
imports: [CheckboxComponent],
templateUrl: './filter-direct.component.html',
styleUrl: './filter-direct.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
hostDirectives: [
{
directive: ExtractChangesDirective,
inputs: ['control'],
},
],
})
export class FilterDirectComponent {
readonly control = input.required<FormControl<boolean>>();
readonly options = input.required<FilterDirectOptions>();
}
Теперь можно вывести форму на главной странице:
export const homeRoutes: Routes = [
{
path: PATHS.homeAvia,
title: $localize`:Home Title:Buy & Fly - Flights with 10% cashback`,
loadComponent: () => import('@baf/home/page').then((m) => m.HomePageComponent),
children: [
{
path: '',
loadComponent: () => import('@baf/search/avia/ui/form').then((m) => m.SearchAviaFormComponent),
outlet: 'form',
},
],
},
// ...
]
Подключим http в app.config.ts:
provideHttpClient(withFetch(),
withInterceptors(httpInterceptors)),
provideClientHydration(),
provideCurrency('RUB'),
Запустим проект:
Создадим форму для бронирования отелей:
mkdir src/app/search/hotels mkdir src/app/search/hotels/common mkdir src/app/search/hotels/common/lib echo >src/app/search/hotels/common/index.ts
Опишем интерфейсы.
search-hotel.interface.ts:
export interface SearchLocation {
readonly cityName: string;
readonly fullName: string;
readonly countryCode: string;
readonly countryName: string;
readonly iata: string[];
readonly id: string;
readonly hotelsCount: string;
readonly location: {
readonly lat: string;
readonly lon: string;
};
readonly _score: number;
}
export interface SearchHotelInfo {
readonly label: string;
readonly locationName: string;
readonly locationId: string;
readonly id: string;
readonly fullName: string;
readonly location: {
readonly lat: string;
readonly lon: string;
};
}
export interface SearchHotelsResponse {
readonly results: {
readonly locations: SearchLocation[];
readonly hotels: SearchHotelInfo[];
};
readonly status: string;
}
export interface SearchHotelDto {
readonly locationId: number;
readonly hotelId: number;
readonly priceFrom: number;
readonly priceAvg: number;
readonly pricePercentile: Record<string, number>;
readonly stars: number;
readonly hotelName: string;
readonly location: {
readonly name: string;
readonly country: string;
readonly state: null | string;
readonly geo: {
readonly lat: number;
readonly lon: number;
};
};
}
export interface SearchHotelDetails {
readonly id: number;
readonly cityId: number;
readonly stars: number;
readonly pricefrom: number;
readonly rating: number;
readonly popularity: number;
readonly propertyType: number;
readonly checkIn: string;
readonly checkOut: string;
readonly distance: number;
readonly photoCount: number;
readonly photos: {
readonly url: string;
readonly width: number;
readonly height: number;
}[];
readonly photosByRoomType: Record<string, number>;
readonly yearOpened: number;
readonly yearRenovated: null | number;
readonly cntRooms: number;
readonly cntSuites: null | number;
readonly cntFloors: number;
readonly facilities: number[];
readonly shortFacilities: string[];
readonly location: {
readonly lon: number;
readonly lat: number;
};
readonly name: Record<string, string>;
readonly address: Record<string, string>;
readonly link: string;
readonly poi_distance: unknown;
}
export interface SearchHotelsDetailsResponse {
readonly pois: unknown[];
readonly hotels: SearchHotelDetails[];
readonly status: string;
}
export interface SearchHotel extends SearchHotelDto {
readonly photos: {
readonly url: string;
readonly width: number;
readonly height: number;
}[];
}
search-hotel.filters.ts:
import { FormControl, FormGroup } from '@angular/forms';
import type { FormFor } from '@baf/core';
export interface SearchHotelFilters {
readonly breakfast: boolean;
readonly freeCancellation: boolean;
readonly fiveStars: boolean;
}
export type SearchHotelFiltersGroup = FormGroup<FormFor<SearchHotelFilters>>;
export const initialSearchHotelFiltersGroup: SearchHotelFiltersGroup = new FormGroup({
breakfast: new FormControl(false, { nonNullable: true, validators: [] }),
fiveStars: new FormControl(false, { nonNullable: true, validators: [] }),
freeCancellation: new FormControl(false, { nonNullable: true, validators: [] }),
});
search-hotel.form.ts:
import { FormControl, FormGroup, Validators } from '@angular/forms';
import type { FormFor } from '@baf/core';
import type { SearchDestination } from '@baf/search/common';
export interface SearchHotelForm {
readonly city: string | SearchDestination;
readonly startDate: string;
readonly endDate: string;
readonly passengers: number | undefined;
}
export type SearchHotelFormGroup = FormGroup<FormFor<SearchHotelForm>>;
export const initialSearchHotelFormGroup: SearchHotelFormGroup = new FormGroup({
city: new FormControl<string | SearchDestination>('', {
nonNullable: true,
validators: [Validators.required],
}),
startDate: new FormControl<string>('', {
nonNullable: true,
validators: [Validators.required],
}),
endDate: new FormControl<string>('', {
nonNullable: true,
validators: [],
}),
passengers: new FormControl<number | undefined>(undefined, {
nonNullable: true,
validators: [Validators.required, Validators.min(1), Validators.max(20)],
}),
});
search-hotel.options.ts:
import { castQueryParams } from '@baf/core';
export interface SearchHotelsInfoOptions {
readonly [key: string]: unknown;
readonly query: string;
readonly lang: string;
readonly limit: number;
readonly lookFor: string;
}
export function getSearchHotelsInfoOptions(queryParams: Record<string, unknown>, lang: string): SearchHotelsInfoOptions {
const { city } = castQueryParams(queryParams);
if (typeof city !== 'string') {
throw new Error('Invalid search flight options');
}
const limit = !isNaN(Number(queryParams['limit'])) ? Number(queryParams['limit']) : 20;
return {
query: city,
lang: lang.toLowerCase(),
lookFor: 'hotel',
limit,
};
}
export interface SearchHotelsOptions {
readonly [key: string]: unknown;
readonly location: string;
readonly limit: number;
readonly currency: string;
readonly token: string;
}
export function getSearchHotelsOptions(queryParams: Record<string, unknown>, token: string, currency: string): SearchHotelsOptions {
const { city, startDate, endDate } = castQueryParams(queryParams);
if (typeof city !== 'string' || typeof startDate !== 'string' || typeof endDate !== 'string') {
throw new Error('Invalid search flight options');
}
const limit = !isNaN(Number(queryParams['limit'])) ? Number(queryParams['limit']) : 20;
return {
location: city,
checkIn: startDate,
checkOut: endDate,
currency: currency.toLowerCase(),
limit,
token,
};
}
Создадим сервисы:
mkdir src/app/search/hotels/services mkdir src/app/search/hotels/services/lib echo >src/app/search/hotels/services/index.ts
Реализация:
import { HttpClient } from '@angular/common/http';
import { DEFAULT_CURRENCY_CODE, inject, Injectable, LOCALE_ID, TransferState } from '@angular/core';
import type { Observable } from 'rxjs';
import { map } from 'rxjs';
import type { Environment } from '@baf/core';
import { castParams, ENV_DEFAULT, ENV_KEY } from '@baf/core';
import type {
SearchHotel,
SearchHotelDetails,
SearchHotelDto,
SearchHotelInfo,
SearchHotelsDetailsResponse,
SearchHotelsResponse,
} from '@baf/search/hotels/common';
import { getSearchHotelsInfoOptions, getSearchHotelsOptions } from '@baf/search/hotels/common';
@Injectable()
export class SearchHotelService {
private readonly httpClient = inject(HttpClient);
private readonly environment = inject(TransferState).get<Environment>(ENV_KEY, ENV_DEFAULT);
private readonly localeId = inject(LOCALE_ID);
private readonly currency = inject(DEFAULT_CURRENCY_CODE);
findHotels(queryParams: Record<string, unknown>): Observable<SearchHotel[]> {
const params = castParams(getSearchHotelsOptions(queryParams, this.environment.hotellookToken, this.currency));
return this.httpClient.get<SearchHotelDto[]>('/api/hotels/cache.json', { params }).pipe(
map((response) => {
// На фронте так делать не нужно. Должен быть бэк, где будет собираться данные и кешироваться.
// Это только для примера.
return response.map((hotel) => ({
...hotel,
photos: [
{
url: `https://photo.hotellook.com/image_v2/limit/h${hotel.hotelId}_0/320/240.auto`,
width: 320,
height: 240,
},
{
url: `https://photo.hotellook.com/image_v2/limit/h${hotel.hotelId}_1/320/240.auto`,
width: 320,
height: 240,
},
{
url: `https://photo.hotellook.com/image_v2/limit/h${hotel.hotelId}_2/320/240.auto`,
width: 320,
height: 240,
},
{
url: `https://photo.hotellook.com/image_v2/limit/h${hotel.hotelId}_3/320/240.auto`,
width: 320,
height: 240,
},
{
url: `https://photo.hotellook.com/image_v2/limit/h${hotel.hotelId}_4/320/240.auto`,
width: 320,
height: 240,
},
{
url: `https://photo.hotellook.com/image_v2/limit/h${hotel.hotelId}_5/320/240.auto`,
width: 320,
height: 240,
},
],
}));
}),
);
}
findHotelsInfo(queryParams: Record<string, unknown>): Observable<SearchHotelInfo[]> {
const params = castParams(getSearchHotelsInfoOptions(queryParams, this.localeId));
return this.httpClient.get<SearchHotelsResponse>('/api/hotels/lookup.json', { params }).pipe(map(({ results }) => results.hotels));
}
getHotelsDetails(locationId: number): Observable<SearchHotelDetails[]> {
const params = {
locationId,
token: this.environment.hotellookToken,
};
return this.httpClient.get<SearchHotelsDetailsResponse>('/api/hotels/static/hotels.json', { params }).pipe(map(({ hotels }) => hotels));
}
}
Добавим раздел:
mkdir src/app/search/hotels/ui mkdir src/app/search/hotels/ui/forms mkdir src/app/search/hotels/ui/forms/lib echo >src/app/search/hotels/ui/forms/index.ts
Сгененируем компонент и изменим его:
<baf-search-form [redirectTo]="redirectTo" [form]="form">
<baf-search-group mode="single">
<baf-search-destination [control]="form.controls.city" [options]="options.city" />
</baf-search-group>
<baf-search-group mode="line">
<baf-search-group mode="date">
<baf-search-date [control]="form.controls.startDate" [options]="options.startDate" />
<baf-search-date [control]="form.controls.endDate" [options]="options.endDate" />
</baf-search-group>
<baf-search-passengers [control]="form.controls.passengers" [options]="options.passengers" />
</baf-search-group>
</baf-search-form>
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { PATHS } from '@baf/core';
import type { SearchFormOptions } from '@baf/search/common';
import type { SearchHotelForm } from '@baf/search/hotels/common';
import { initialSearchHotelFormGroup } from '@baf/search/hotels/common';
import {
SearchDateComponent,
SearchDestinationComponent,
SearchGroupComponent,
SearchPassengersComponent,
SearchReverseComponent,
} from '@baf/search/ui/fields';
import { SearchFormComponent } from '@baf/search/ui/form';
import { ButtonComponent } from '@baf/ui/buttons';
@Component({
selector: 'baf-search-hotel-form',
standalone: true,
imports: [
SearchFormComponent,
SearchGroupComponent,
SearchDestinationComponent,
SearchReverseComponent,
SearchDateComponent,
SearchPassengersComponent,
ButtonComponent,
],
templateUrl: './search-hotel-form.component.html',
styleUrl: './search-hotel-form.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchHotelFormComponent {
readonly form = initialSearchHotelFormGroup;
readonly redirectTo = PATHS.searchHotel;
readonly options: SearchFormOptions<SearchHotelForm> = {
city: { label: $localize`:Search Field:City`, id: 'city', types: ['city'], key: 'name' },
startDate: { label: $localize`:Search Field:When`, id: 'startDate' },
endDate: { label: $localize`:Search Field:When back`, id: 'endDate', startDate: this.form.controls.startDate },
passengers: { label: $localize`:Search Field:Guests`, id: 'passengers' },
};
}
Внимательный читатель заметит, что реализация полностью продублирована из формы поиска авиабилетов.
Реализуем форму фильтров:
mkdir src/app/search/hotels/ui/filters mkdir src/app/search/hotels/ui/filters/lib echo >src/app/search/hotels/ui/filters/index.ts
Разметка:
<baf-search-filters [form]="form">
<baf-filter-breakfast [control]="form.controls.breakfast" [options]="options.breakfast"></baf-filter-breakfast>
<baf-filter-five-stars [control]="form.controls.fiveStars" [options]="options.fiveStars"></baf-filter-five-stars>
<baf-filter-free-cancellation
[control]="form.controls.freeCancellation"
[options]="options.freeCancellation"
></baf-filter-free-cancellation>
</baf-search-filters>
Логика:
import { ChangeDetectionStrategy, Component } from '@angular/core';
import type { SearchFormOptions } from '@baf/search/common';
import type { SearchHotelFilters } from '@baf/search/hotels/common';
import { initialSearchHotelFiltersGroup } from '@baf/search/hotels/common';
import { SearchFiltersComponent } from '@baf/search/ui/filters';
import { FilterBreakfastComponent } from './filter-breakfast/filter-breakfast.component';
import { FilterFiveStarsComponent } from './filter-five-stars/filter-five-stars.component';
import { FilterFreeCancellationComponent } from './filter-free-cancellation/filter-free-cancellation.component';
@Component({
selector: 'baf-search-filters-hotels',
standalone: true,
imports: [SearchFiltersComponent, FilterBreakfastComponent, FilterFreeCancellationComponent, FilterFiveStarsComponent],
templateUrl: './search-filters-hotels.component.html',
styleUrl: './search-filters-hotels.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchFiltersHotelsComponent {
readonly form = initialSearchHotelFiltersGroup;
readonly options: SearchFormOptions<SearchHotelFilters> = {
breakfast: { label: $localize`:Search Filter:Breakfast`, id: 'breakfast', name: 'breakfast' },
fiveStars: { label: $localize`:Search Filter:Five Stars`, id: 'fiveStars', name: 'fiveStars' },
freeCancellation: { label: $localize`:Search Filter:Free Cancellation`, id: 'freeCancellation', name: 'freeCancellation' },
};
}
Выведем на странице:
{
path: PATHS.homeHotels,
title: $localize`:Home Title:Buy & Fly - Hotels with 10% cashback`,
loadComponent: () => import('@baf/home/page').then((m) => m.HomePageComponent),
children: [
{
path: '',
loadComponent: () => import('@baf/search/hotels/ui/form').then((m) => m.SearchHotelFormComponent),
outlet: 'form',
},
],
},
Запустим проект:
Продублируем все для поиска ж/д билетов и включим.
{
path: PATHS.homeRailways,
title: $localize`:Home Title:Buy & Fly - Railways with 5% cashback`,
loadComponent: () => import('@baf/home/page').then((m) => m.HomePageComponent),
children: [
{
path: '',
loadComponent: () => import('@baf/search/railways/ui/form').then((m) => m.SearchRailwayFormComponent),
outlet: 'form',
},
],
},
Запустим проект:
Для добавления русского языка добавим переводы:
В angular.json:
{
"i18n": {
"sourceLocale": "en-US",
"locales": {
"ru": {
"translation": "src/i18n/messages.xlf",
"baseHref": ""
}
}
}
}
Запустим команду:
yarn ng extract-i18n --out-file=src/i18n/source.xlf
Заполним файл:
src/i18n/messages.xlf
Добавим страницу поиска:
mkdir src/app/search/page mkdir src/app/search/page/lib echo >src/app/search/page//index.ts
Создадим компонент search-page:
yarn ng g c search-page
Шаблон:
<baf-container>
<div class="form">
<router-outlet name="form" />
</div>
<div class="row">
<div class="column">
<router-outlet name="filters" />
</div>
<div class="column">
<router-outlet name="results" />
<router-outlet name="map" />
</div>
</div>
<router-outlet />
</baf-container>
Немного стилей:
@use 'src/stylesheets/device' as device;
.row {
display: flex;
flex-direction: column-reverse;
@include device.media-tablet-up() {
flex-direction: row;
}
}
.column {
@include device.media-tablet-up() {
&:first-child {
width: 33.333%;
padding-right: 0.5rem;
}
&:last-child {
width: 66.667%;
padding-left: 0.5rem;
}
}
@include device.media-web() {
&:first-child {
width: 25%;
}
&:last-child {
width: 75%;
}
}
}
.form {
margin: 1rem 0;
}
Компонент:
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ContainerComponent } from '@baf/ui/container';
@Component({
selector: 'baf-search-page',
standalone: true,
imports: [RouterOutlet, ContainerComponent],
templateUrl: './search-page.component.html',
styleUrl: './search-page.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchPageComponent {}
Как можно увидеть из макета, на странице выводится вложенные компоненты из роутинга:
{
path: PATHS.search,
loadChildren: () => import('./routes/search.routes').then((m) => m.searchRoutes),
},
И роуты:
import type { Routes } from '@angular/router';
import { PATHS, withChildNavigation } from '@baf/core';
export const searchRoutes: Routes = [
{
path: PATHS.searchAvia,
title: $localize`:Search Page:Search for cheap flights`,
loadComponent: () => import('@baf/search/page').then((m) => m.SearchPageComponent),
children: [
{
path: '',
loadComponent: () => import('@baf/search/avia/ui/form').then((m) => m.SearchAviaFormComponent),
outlet: 'form',
},
{
path: '',
loadComponent: () => import('@baf/search/avia/ui/results').then((m) => m.SearchResultsAviaComponent),
outlet: 'results',
},
{
path: '',
loadComponent: () => import('@baf/search/avia/ui/filters').then((m) => m.SearchFiltersAviaComponent),
outlet: 'filters',
},
],
},
{
path: PATHS.searchHotel,
title: $localize`:Search Page:Search for cheap hotels`,
loadComponent: () => import('@baf/search/page').then((m) => m.SearchPageComponent),
children: [
{
path: '',
loadComponent: () => import('@baf/search/hotels/ui/form').then((m) => m.SearchHotelFormComponent),
outlet: 'form',
},
{
path: '',
loadComponent: () => import('@baf/search/hotels/ui/results').then((m) => m.SearchHotelsResultComponent),
outlet: 'results',
},
{
path: '',
loadComponent: () => import('@baf/search/hotels/ui/filters').then((m) => m.SearchFiltersHotelsComponent),
outlet: 'filters',
},
],
},
{
path: PATHS.searchTour,
title: $localize`:Search Page:Search for cheap tours`,
loadComponent: () => import('@baf/development/page').then((m) => m.DevelopmentPageComponent),
},
{
path: PATHS.searchRailway,
title: $localize`:Search Page:Search for cheap railways`,
loadComponent: () => import('@baf/development/page').then((m) => m.DevelopmentPageComponent),
},
].map(withChildNavigation(PATHS.search));
В ходе цикла статей было реализовано приложение для поиска авиабилетов, а также бронирования отелей.
Я описал весь процесс создания, начиная с генерации приложения, заканчивая интеграция со сторонним API.
Демо можно посмотреть здесь - buy-and-fly.fafn.ru/
Спасибо, что дочитали до конца.
Все исходники находятся на github, в репозитории - github.com/Fafnur/buy-and-fly
Демо можно посмотреть здесь - buy-and-fly.fafn.ru/
Мои группы: telegram, medium, vk, x.com, linkedin, site
Das obige ist der detaillierte Inhalt vonImplementierung der Suche und Integration mit externer API in Angular 18. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Welche Programmiersprache ist C-Sprache?
http 400 Ungültige Anfrage
Spot-Trading-Software
Der Unterschied zwischen der Win10-Home-Version und der Professional-Version
Big-Data-Analysetools
Was bedeutet Kol?
So richten Sie eine FTP-Site ein
Es gibt mehrere Möglichkeiten, die CSS-Position zu positionieren
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
