Angular 将可选参数传递给路由_Angular 2 培训手册

Angular 将可选参数传递给路由

查询参数允许您将可选参数传递到路由，例如分页信息。

例如，在具有分页列表的路由上，网址可能如下所示，表示我们已加载第二个网页：

localhost:3000/product-list?page=2

查询参数和路由参数之间的关键区别在于路由参数对于确定路由是必要的，而查询参数是可选的。

传递查询参数

使用[queryParams]指令和[routerLink]来传递查询参数。例如：

<a [routerLink]="['product-list']" [queryParams]="{ page: 99 }">Go to Page 99</a>

或者，我们可以使用Router服务通过JS跳转：

  goToPage(pageNum) {
    this.router.navigate(['/product-list'], { queryParams: { page: pageNum } });
  }

读取查询参数

类似于读取路由参数，Router服务返回一个Observable，我们可以订阅读取查询参数：

import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
  selector: 'product-list',
  template: `<!-- Show product list -->`
})
export default class ProductList {
  constructor(
    private route: ActivatedRoute,
    private router: Router) {}
  ngOnInit() {
    this.sub = this.route
      .queryParams
      .subscribe(params => {
        // Defaults to 0 if no query param provided.
        this.page = +params['page'] || 0;
      });
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }
  nextPage() {
    this.router.navigate(['product-list'], { queryParams: { page: this.page + 1 } });
  }
}

下一节：Angular 2支持辅助路由的概念，它允许您在单个应用程序中设置和导航多个独立路由。每个组件具有一个主路由和零个或多个辅助出口。辅助出口必须在组件中具有唯一的名称。