Угловой мгновенный поиск - обновление конфигурации HTML на основе параметров URL
В настоящее время я использую Angular с Angular Instant Search.
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 ответ
Решаемые.
// 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>