Angular Instant Search - 基于 URL 参数更新 HTML 配置答案

【问题标题】：Angular Instant Search - Update HTML config based on URL paramsAngular Instant Search - 基于 URL 参数更新 HTML 配置
【发布时间】：2019-05-04 02:54:02
【问题描述】：

我目前正在使用 Angular 和 Angular Instant Search。

1 - 根据 URL 参数变化动态更新 HTML 配置

我有一个分屏应用程序。左边的文件夹。上的项目权利。
点击文件夹时，URL中的文件夹ID被修改
我的项目组件订阅这些更改并更新我的文件夹 ID 的本地变量
我在 Angular Instant Search 配置中使用此文件夹 ID。

读取url中文件夹id的变化

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

更新我的 Angular 即时搜索配置

  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>

在初始加载时，这很有效。但是，当单击文件夹并更新 ID 时，正确的 ID 会传递到“setSearchConfig”函数中。但是除非我刷新页面，否则 HTML 不会更新。

问题如何使 HTML 动态更新？

【问题讨论】：

标签： angular algolia instantsearch.js instantsearch

【解决方案1】：

解决了。

// 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>

【讨论】：