在Angular Router中使用查询参数QueryParameter

选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。

会涉及到的api有:Angular RouterRouterLinkActivatedRoute

在Router.navigate中使用查询参数

单参数

如果使用 Router.navigate 路由,navigate提供了queryParams 用作查询参数传递。

toProducts() {
  this.router.navigate(
    ['/products'],
    { queryParams: { order: 'latest' } }
  );
}

示例中,路由到产品页,并且使用latest来做排序。其中order=latest就是查询参数。此路由的结果是:

http://localhost:4200/products?order=latest

多参数

这里添加一个分类参数category=computer作为过滤,如下:

toProducts() {
  this.router.navigate(
    ['/products'],
    { queryParams: { order: 'latest', 'category': 'computer' } }
  );
}

得到的url结果是:

http://localhost:4200/products?order=latest&category=computer

使用 queryParamsHandling 保留或合并查询参数

默认情况下,任何后续的跳转会丢失查询参数。为了防止这种情况,可以将 queryParamsHandling 设置为“preserve”或“merge”。

保留参数preserve

假设目前的链接是:

http://localhost:4200/products?order=latest

现在需要跳转到用户列表,并且希望保留order=latest参数,即跳转后的链接为:

http://localhost:4200/users?order=latest

实现此需求的办法就是使用queryParamsHandling,设置为“preserve”:

toUsers() {
  this.router.navigate(
    ['/users'],
    { queryParamsHandling: 'preserve' }
  );
}

合并参数merge

如果users链接还有自己的参数,如分页pageNum=1,并且想保留order=latest,得到的链接是:

http://localhost:4200/users?order=latest&pageNum=1

实现此需求的办法就是使用queryParamsHandling,设置为“merge”:

toUsers() {
  this.router.navigate(
    ['/users'],
    {
      queryParams: { pageNum: '1' },
      queryParamsHandling: 'merge' }
    );
}

在RouterLink使用查询参数

上面的示例,如果是使用RouterLink指令,产品列表实现如下:

<a
  [routerLink]="['/products']"
  [queryParams]="{ order: 'latest'}"
>
  Products
</a>

跳转到用户列表,保留/products的参数order=latest,并且添加自己的参数pageNum:

<a
   [routerLink]="['/users']"
   [queryParams]="{ pageNum: '1' }"
   queryParamsHandling="merge"
>
  Users
</a>

获取查询参数的值

上面说明了在路由中传递参数,这里说明如何获取参数。

使用queryParams

上面示例中的产品列表:

http://localhost:4200/products?order=latest

使用queryParams获取order参数的值:

import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/filter';

@Component({ ... })
export class ProductComponent implements OnInit {
  order: string;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams
      .filter(params => params.order)
      .subscribe(params => {
        console.log(params); // { order: "latest" }

        this.order = params.order;

        console.log(this.order); // latest
      }
    );
  }
}

在注释里输出{ order: "latest" }latest

使用queryParamMap

queryParamMap想返回一个带有 paramMap 对象的 Observable。

链接如下:

http://localhost:4200/users?order=latest&pageNum=1

访问查询参数如下:

this.route.queryParamMap
  .subscribe((params) => {
    this.orderObj = { ...params.keys, ...params };
  }
);

这里使用对象扩展运算符,得到的对象:

{
  "0": "order",
  "1": "pageNum",
  "params": {
    "order": "latest",
    "filter": "1"
  }
}

 

版权声明:著作权归作者所有。

相关推荐

查看MySQL数据库空间使用情况

information_schema是MySQL的系统数据库,information_schema里的tables表存放了整个数据库各个表的使用情况。可以使用sql来统计出数据库的空间使用情况,相关字段:table_schema:数据库名table_name:表名table_rows:记录数data_length:数据大小index_length:索引大小统计表使用空间mysql> select

Angular CLI在Angular项目里使用scss

Angular CLI支持多种css预处理,包括:cssscsslesssassstyl (stylus)默认值为css。Angular有两种方式指定css预处理。下面以scss为例:新建项目指定css预处理在新建angular项目是使用--style指定css预处理ng new my-project --style=scss 已有项目指定css预

Sql Server使用查询语句更新数据

Sql Server支持在一个sql语句里使用查询的数据更新表。简单更新简单的使用一个表的数据更新另一个表。UPDATE    table_a  SET    table_a.col1=table_b.col1 FROM    table_b  WHERE table_

C#对DataTable做LINQ查询

我们是不能直接对DataTable做LINQ查询,DataRowCollection是没有实现IEnumerable<T>。有一些方法可以间接实现对DataTable执行LINQ查询。AsEnumerable()使用DataTable的扩展AsEnumerable(),把DataTable转换为IEnumerable<DataRow>。var results&nb

Elasticsearch使用pattern_replace过滤器忽略查询里的特殊字符

假设elasticsearch的一个字段存储了包含字母,数字以及特殊字符的字符串作为值,如ABC-123-456。现在用户输入以下字符希望能匹配此值:完全匹配:ABC-123-456忽略特殊字符:ABC123456小写且忽略特殊字符:abc123456混有其他特殊字符串:Ab.c-123,456这里可以使用pattern_replace过滤器以及自定义一个分析器来处理。1、定义pattern_re

Angular 5获取当前的路由url及参数

获取当前加载组件的路由信息可以使用ActivatedRoute。ActivatedRoute接口如下:interface ActivatedRoute {    snapshot: ActivatedRouteSnapshot   url: Observable<UrlSegment[]> &nb

查询Redis数据库的数量

redis数据库的数量是固定的,可以在redis.conf查询到redis数据库的数量。使用grep命令:$ cat redis.conf | grep databasesdatabases 16当然,也可以在redis-cli上查询数据库的数量:127.0.0.1:6379> CONFIG GET databases1) "databases"2) "16"使用config get dat