码迷,mamicode.com
首页 > 其他好文 > 详细

[Angular] Preserve the current route’s query parameters when navigating with the Angular Router

时间:2020-02-16 23:28:08      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:scribe   router   activate   sync   ini   div   lin   person   less   

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
      });
    });
  }

 

[Angular] Preserve the current route’s query parameters when navigating with the Angular Router

标签:scribe   router   activate   sync   ini   div   lin   person   less   

原文地址:https://www.cnblogs.com/Answer1215/p/12319402.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!