Блог

Я пытаюсь реализовать algolia способом angular.

Я установил places.js с помощью npm.

Вот соответствующая часть:

 @ViewChild("input") private input;
private instance = null;

ngAfterViewInit() {
    console.log(this.input);
    this.instance = places({
      appId: this.dataService.ALGO_APPLICATION_ID,
      apiKey: this.dataService.ALGO_KEY,
      container: this.input,
      type: 'city'
    });
  }
  

Это говорит мне, что контейнер должен быть элементом ввода, но когда я console.log(this.input) вижу элемент ввода:

Я старался сделать его как можно короче. Если требуется больше кода, дайте мне знать в комментариях.

input происходит из html:

 <input #input id="algoliaInput" type="search" placeholder="Where are we going?">
  

private input не является htmlэлементом, как вы можете видеть в журнале.

Он содержит html-элемент, но на самом деле это ElementRef объект. Итак, изменение вашего кода на следующий работает.

 import { ElementRef } from '@angular/core';

....

@ViewChild("input") private input: ElementRef<HTMLInputElement>;
private instance = null;

ngAfterViewInit() {
    console.log(this.input);
    this.instance = places({
      appId: this.dataService.ALGO_APPLICATION_ID,
      apiKey: this.dataService.ALGO_KEY,
      container: this.input.nativeElement, // nativeElement is the real HtmlElement.
      type: 'city'
    });
}