如何在Ionic / Angular中安装Algolia搜索

npm install algoliasearch

// src/app/algolia.service.ts

import { Injectable } from '@angular/core';
import algoliasearch, { SearchClient, SearchIndex } from 'algoliasearch/lite';

@Injectable({
  providedIn: 'root'
})
export class AlgoliaService {
  private client: SearchClient;
  private index: SearchIndex;

  constructor() {
    this.client = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');
    this.index = this.client.initIndex('YourIndexName');
  }

  search(query: string) {
    return this.index.search(query);
  }
}

// src/app/search.component.ts

import { Component } from '@angular/core';
import { AlgoliaService } from './algolia.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent {
  query: string = '';
  results: any[] = [];

  constructor(private algoliaService: AlgoliaService) {}

  onSearch() {
    this.algoliaService.search(this.query).then(({ hits }) => {
      this.results = hits;
    });
  }
}

<!-- src/app/search.component.html -->

<ion-header>
  <ion-toolbar>
    <ion-title>Search</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-searchbar [(ngModel)]="query" (ionInput)="onSearch()"></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let result of results">
      {{ result.name }}
    </ion-item>
  </ion-list>
</ion-content>

// src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { SearchComponent } from './search.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent, SearchComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, FormsModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

// src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { SearchComponent } from './search.component';

const routes: Routes = [
  { path: '', redirectTo: 'search', pathMatch: 'full' },
  { path: 'search', component: SearchComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

ionic serve