我目前正在使用 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 动态更新?