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