0

現在、Angular Instant Search で Angular を使用しています。

1 - URL パラメータの変更に基づいて HTML 構成を動的に更新します

  • 分割画面アプリケーションがあります。左側のフォルダー。右側のプロジェクト。
  • フォルダをクリックすると、URL のフォルダ ID が変更されます
  • 私のプロジェクト コンポーネントはこれらの変更をサブスクライブし、フォルダー ID のローカル変数を更新します
  • このフォルダー ID を Angular Instant Search 構成で使用します。

URLのフォルダIDの変更を読み取る

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

Angular Instant Search 構成の更新

  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 を動的に更新するにはどうすればよいですか?

4

1 に答える 1