Угловой мгновенный поиск - обновление конфигурации HTML на основе параметров URL - PullRequest
Новая
       30

Угловой мгновенный поиск - обновление конфигурации HTML на основе параметров URL

0 голосов
/ 02 декабря 2018

В настоящее время я использую Angular с угловым мгновенным поиском.

1 - динамически обновлять конфигурацию HTML в зависимости от изменения параметра URL

  • У меня есть приложение с разделенным экраном.Папки слева.Проекты справа.
  • При щелчке по папке изменяется идентификатор папки в URL-адресе
  • Компонент «Мои проекты» подписывается на эти изменения и обновляет локальную переменную для идентификатора моей папки
  • Я использую этот идентификатор папки в моей конфигурации Angular Instant Search.

Чтение изменения идентификатора папки в URL 

    setUrlParams(){
       this.activatedRoute.params.subscribe((urlParameters) => {    
          this.folder_id = urlParameters['folderId'];
          this.setSearchConfig( this.folder_id);    
        });
    }

Обновление моей конфигурации углового мгновенного поиска 

  setSearchConfig(folder_id){

    this.configOption = {
      apiKey: "apiKey",
      appId: "appID",
      indexName: "projects",
      routing: false,
      searchParameters: {
        facetsRefinements: {
          project_folder: [folder_id]
        }
      },
    };

  }

HTML 

<ais-instantsearch [config]="configOption">

   <ais-search-box placeholder='Search for products'></ais-search-box>

   <ais-hits>
      <ng-template let-hits="hits">
         <div *ngFor="let hit of hits">
           Hit {{hit.objectID}}: {{hit.project_title}}
         </div>
       </ng-template>
    </ais-hits>

</ais-instantsearch>

При начальной загрузке это прекрасно работает.Однако при нажатии на папку и обновлении идентификатора правильный идентификатор передается в функцию setSearchConfig.Но HTML не обновляется, пока я не обновлю страницу.

Вопрос Как настроить динамическое обновление HTML?

1 Ответ

0 голосов
/ 02 декабря 2018

Решено. 

// 1. Create a search param object

searchParameters = {}



// 2. Call a function (setSearchParams) on url change

setUrlParams(){
   this.activatedRoute.params.subscribe((urlParameters) => {    
      this.folder_id = urlParameters['folderId'];
      this.setSearchConfig( this.folder_id);    
   });
}


// 3. Set the search param filters to the new folder id

setInstantSearchParams(folder_id){
   this.searchParameters = {
      filters: "project_folder: '" + folder_id + "'"
   }
}

Добавьте следующее в HTML 

<ais-configure [searchParameters]="searchParameters"></ais-configure>
...