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

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

[Angular] Preserve the current route’s query parameters when navigating with the Angular Router的相关文章

[Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable

In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parameters from one route into another route. There are couple of ways of doing this from the source route perspective: we use the queryParams property in t

4.9 Routing -- Query Parameters

一.概述 1. 在URL中查询参数是可选的key-value对,出现在?的右边.例如,下面的URL有两个查询参数,sort和page,对应的值分别是ASC和2. example:http://example.com/articles?sort=ASC&page=2 2. Query params允许额外的应用程序状态被序列化到那些不能融入URL路径的URL中(比如?左边的任何东西).常见的使用案例查询参数包括:分页集合中的当前页码,筛选条件,或排序标准. 二.Specifying qyery p

使用Retrofit时出现 java.lang.IllegalArgumentException: URL query string &quot;t={type}&amp;p={page}&amp;size={count}&quot; must not have replace block. For dynamic query parameters use @Query.异常原因

/** * Created by leo on 16/4/30. */ public interface GanchaiService { @GET("digest?t={type}&p={page}&size={count}") Call<List<GanChaiEntry>> ListGanchaiEntry(@Path("type") int type , @Path("count") int cou

WebAPi Restful 的实现和跨域

现在实际开发中用webapi来实现Restful接口开发很多,我们项目组前一段时间也在用这东西,发现大家用的还是不那么顺畅,所以这里写一个Demo给大家讲解一下,我的出发点不是如何实现,而是为什么? 首先我们来看看我么的code吧: control: public class Users { public int UserID { set; get; } public string UserName { set; get; } public string UserEmail { set; get

angular -- $route API翻译

$route -$routeProvider服务 -依赖ngRoute模块 $route能够在路径发生改变的时候,渲染不同的视图,调用不同的控制器.它监测了$location.url(),然后根据路径来匹配相应的路由,路由的定义方法详见$routeProvider的API. $route通常和$routeProvider服务和ngView指令一起使用 依赖: $location$routeParams 方法: reload() 在路由没有改变的时候,再次加载当前路径的路由,重新渲染ng-view

All About Angular 2.0

angular All About Angular 2.0 Posted by Rob Eisenberg on  November 6th, 2014. Have questions about the strategy for Angular 2.0? This is the place. In the following article I'll explain the major feature areas of Angular 2.0 along with the motivation

Part 39 AngularJS route change events

In this video we will discuss1. Different events that are triggered when a route change occurs in an angular application2. Logging the events and event handler parameters to inspect their respective properties When route navigation occurs in an Angul

angular smart-table组件如何定制化之初步研究

table表运用在后台管理用得频繁,一般bootstrap的class="table"就能满足样式需求以及分页需求,但是每个产品经理需求不一样,比如说分页:bootstrap分页实现是这样子的 但原型要求这样子的 被推荐angular相关table组件smart-table算是功能相当全的,学习官网地址http://lorenzofox3.github.io/smart-table-website/#section-intro 看了一下,上手可以,但是要深入了解内容较难.调研smart

浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

本文转载自:http://www.cnblogs.com/kenkofox/p/4643760.html 心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs