简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

Angular 18 中搜尋的實作以及與外部 API 的集成

DDD
發布： 2024-09-13 22:18:32
原創
477 人瀏覽過

讓我們繼續建立一個用於搜尋門票和住宿的表單。

讓我們看一下網站上的範例 - Travel.alfabank.ru

此處顯示以下欄位：

  • 起源 - 來自哪裡；
  • 目的地 - 哪裡；
  • direct - 直接路線；
  • 貨幣 - 貨幣;
  • Department_at - 出發/出發/入住日期；
  • return_at - 返回/驅逐日期。

搜尋機票時，會顯示所有字段，選擇飯店時，僅顯示部分字段。

不可能在不同的地方預訂住宿（這是一個非常不靈活的系統，儘管airbnb提供了這一點）。

讓我們建立一個 src/search 部分，在其中儲存與搜尋相關的所有內容。

讓我們加入幾個介面：

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;
}
登入後複製
  • SearchDestination - 描述目的地。
    • 類型是國家、城市或機場
    • 姓名 - 姓名
  • SearchFieldOptions - 配置表單時可以設定的參數。
  • SearchFormOptions - 產生的類型
  • getSearchQueryParams 是一個小實用程序，用於將 queryParams 轉換為所需的形式。

讓我們開始透過搜尋機票來實現表單，因為這包括整個欄位集。

建立avia部分：

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
登入後複製

新增介面：

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',
  };
}
登入後複製
  • SearchDeclination - 地名的偏角（大多只在俄語中需要）；
  • SearchCityOrAirportDTO - 有關城市或機場的資訊；
  • SearchFlightOptions - 搜尋選項；
  • SearchFlightResponse - 合適的航班；
  • SearchAviaLine - 一個方向；
  • getSearchFlightOptions - 檢查傳遞參數的函式。

現在讓我們定義表單本身：

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)],
  }),
});
登入後複製
  • SearchAviaForm - 欄位清單；
  • SearchAviaFormGroup - 角反應形式；
  • initialSearchAviaFormGroup - 初始狀態。

此外，讓我們定義過濾器：

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 - 可用值；
SearchAviaFiltersGroup - 角反應形式；
initialSearchAviaFiltersGroup - 初始狀態。

新增 search/avia/services 部分，其中將包含用於存取外部 API 的服務：

mkdir src/app/search/avia/services
mkdir src/app/search/avia/services/lib
echo >src/app/search/avia/services/index.ts
登入後複製

實作：

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 只包含一個方法 - findFlights:

  • getSearchFlightOptions - 將參數轉換為請求格式；
  • castParams - 刪除不必要的和空的屬性。

普羅斯基設置

對於本機開發，您需要設定代理程式。

安裝dotenv：

yarn add -D dotenv
登入後複製

然後在main.server.ts中透過連接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:

{
  "/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
  }
}
登入後複製

在 angular.json 中我們將寫 proxyConfig:

{
  ...,
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "proxyConfig": "src/proxy.conf.json"
    }
  }
}
登入後複製

在 app.config.server.ts 中我們將連線環境：

export const config = mergeApplicationConfig(envConfig, appConfig, serverConfig);
登入後複製

在專案的根目錄中，我們將添加帶有以下標記的 .env：

AVIASALES_TOKEN=YourTokenForTravelPayouts
HOTELLOOK_TOKEN=YourTokenForTravelPayouts
登入後複製

讓我們啟動並測試。

您可以在控制台中顯示變數。

對於生產，我新增了一個基於節點伺服器的代理程式
伺服器.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();
登入後複製

正如您從範例中看到的，我正在使用 http-proxy-middleware。

表單字段

由於所有表單都是相似的，讓我們建立通用元件來實現它們。

產生欄位：

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
登入後複製

我們需要以下控制：

  • date - выбор даты;
  • destination - выбор места;
  • passengers - указание количества пассажиров.

Также 2 специальных компонента:

  • group - группировка полей;
  • reverse - смена откуда и куда.

Создание SearchDate

Запустим команду:

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);
    }
  }
}
登入後複製
  • is-hide - скрываем на мобильном устройстве обратную дату, и показываем ее если выбрано значение;
  • is-start-date/is-end-date - скругления у полей.

Реализация самого компонента достаточно тривиальна.

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. Я все экспериментирую с автоматизацией стилизации. Но видимо, это не самое удачное решение.

  • control - контрол формы;
  • options - список настроек.

Создание SearchDestination

Создадим место назначения:

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. Как это обойти расскажу ниже.

Создание SearchReverse

Добавим смену места.

Для этого создадим новый компонент:

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 });
    }
  }
}
登入後複製

Просто при клике меняем места назначения.

Создание SearchPassengers

Контрол для количества пассажиров:

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>();
}
登入後複製

Создание SearchGroup 

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() }),
    });
  }
}
登入後複製
登入後複製

Форма добавляет общий метод отправки и после инициализации компонента заполняется данными.

  • form - angular reactive form;
  • redirectTo - редирект на результаты;
  • submitted - событие перехода. 
    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'),
登入後複製

Запустим проект:

Реализация поиска и интеграция с внешним API в Angular 18

Форма поиска отелей

Создадим форму для бронирования отелей:

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;
  }[];
}
登入後複製
  • SearchLocation - информация о местоположении;
  • SearchHotelInfo - информация об отеле;
  • SearchHotelsResponse - список отелей;
  • SearchHotelDto - DTO;
  • SearchHotelDetails - расширенная информация
  • SearchHotelsDetailsResponse - список отелей
  • SearchHotel - информация об отеле;

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: [] }),
});
登入後複製
  • SearchHotelFilters - доступные параметры для фильтрации
  • SearchHotelFiltersGroup - angular reactive form
  • initialSearchHotelFiltersGroup - начальное состояние

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,
  };
}
登入後複製
  • SearchHotelsOptions, SearchHotelsInfoOptions - информация об отеле;
  • getSearchHotelsOptions, getSearchHotelsInfoOptions - формирование опций для внешнего API.

Создадим сервисы:

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));
  }
}
登入後複製
  • findHotels - получение списка отелей по заданным параметрам;
  • findHotelsInfo, getHotelsDetails - не используется в проекте, осталось как часть легаси.

Добавим раздел:

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',
      },
    ],
  },
登入後複製

Запустим проект:

Реализация поиска и интеграция с внешним API в Angular 18

Форма поиска Ж/Д билетов

Продублируем все для поиска ж/д билетов и включим.

 {
    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',
      },
    ],
  },
登入後複製

Запустим проект:

Реализация поиска и интеграция с внешним API в Angular 18

Локализация

Для добавления русского языка добавим переводы:

В 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

以上是Angular 18 中搜尋的實作以及與外部 API 的集成的詳細內容。更多資訊請關注PHP中文網其他相關文章！

來源：dev.to
上一篇：PubNub 與 Pusher 在 React 中創建即時訊息應用程式 下一篇：Angular 18 中核心服務與實用程式的開發
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
2
1616
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
10
1769
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
1511
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1423
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1468
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！