Question

我有Angular6项目。它具有清单组件和详细信息组件。在列表组件中，我有一个搜索框。当我搜索任何内容时，并基于该内容重定向到详细信息页面时，我将分配queryParams，回来时将保留那些queryParams。而且工作正常。

但是再次，当我在搜索框中键入任何内容时，我想使用在搜索框中输入的更新的搜索字符串来更新URL，而无需再次重新加载页面，即。我想在保持queryParams更新的同时更改搜索框输入字段。

listing.component.html

<div class="input-group">
    <input type="text" name="search" [(ngModel)]="search">
</div>
<div class="row" *ngFor="let List of Lists | searchFilter:search:'name' | paginate: { itemsPerPage: 25, currentPage: page }">
    <div (click)="editList(List.ListId)">{{List.name}}</div>  
</div>

listing.component.ts

ngOnInit(): void {
    this.search = this.activatedRoute.snapshot.queryParams['search'] || '';
}

editPrice(ListId: number): void {
    this.router.navigate(['lists/edit', ListId], { queryParams:
        { search: this.search }
    });
}

detail.component.html

<a [routerLink]="['/lists']" queryParamsHandling="preserve">Go Back</a>

Answer 1

假设您要用id更新参数anotherId：

import { Location } from '@angular/common';

constructor(
    private route: ActivatedRoute,
    private location: Location,

) { }


ngOnInit() {
        this.route.paramMap.subscribe(param => {
            this.id = param.get('id');
        });
  }


updateUrl(){

   let anotherId : number = '10'

   let cururl = this.location.path().replace(this.id, anotherId );

   this.location.go(cururl);
}

Answer 2

订阅activateRoute.snapshot而不是activatedRoute.params

例如：

 this.activateRoute.params.subscribe((data) => {
     this.search = data.search
     // Your search logic here
 });

如何在URL中更新queryParams而无需在Angular 6中重新加载页面

2 个答案: