When we redirect to a different route from within our component‘s code using the Router.navigate
or from within a component template via a [routerLink]
directive, we may want to preserve the current route’s query parameters and carry them on to the next route. In this lesson we‘ll learn about the router‘s preserveQueryParams
option as well as the [queryParams]
directive on the [routerLink]
.
If you using template syntax to do the routing:
import { Component, OnInit } from ‘@angular/core‘; import { PeopleService } from ‘./people.service‘; import { ActivatedRoute } from ‘@angular/router‘; @Component({ selector: ‘app-people-list‘, template: ` <h3>People</h3> <ul> <li *ngFor="let person of people | async"> <a [routerLink]="[person.id]" [queryParams]="activatedRoute.queryParams | async">{{ person.name }}</a> </li> </ul> `, styles: [] }) export class PeopleListComponent implements OnInit { people; constructor( private peopleService: PeopleService, public activatedRoute: ActivatedRoute ) {} ngOnInit() { this.people = this.peopleService.getAll(); } }
You can directly bind queryParams form the activeRoute.
If you doing routing from the component:
onSave(personName) { this.person.name = personName; this.peopleService.save(this.person).subscribe(() => { // redirect back people list this.router.navigate([‘../‘], { relativeTo: this.activatedRoute, preserveQueryParams: true }); }); }
原文地址:https://www.cnblogs.com/Answer1215/p/12319402.html
时间: 2024-10-22 17:13:27