Question

我试图了解创建路线的方式，其中包含一些信息的网址参数。

这是我的路线（app.routes.ts）：

{path: 'results/:id', component: MyResultsComponent},

这是我导航到路线的方式：

goToResultsPage(query: string) {
this.router.navigate(['results', query], { queryParams: { pageSize: 20 } });}

如您所见，我还是一个查询参数。我想知道，在MyResultsComponent中检索此内容的最佳和最干净的方法是什么。现在我有一种嵌套的subscribe结构：

ngOnInit() {
    this.route
      .params
      .subscribe(params => {
        this.query = params['id'];
        this.route
          .queryParams
          .subscribe(queryParams => {
            this.offset = queryParams['pageSize'];
            #find entries this.entryService.findEntries(this.query, this.pageSize);
      });
    });
  }

之后，我想将此参数传递给我的EntryService，后者返回找到的条目。

Answer 1

Observable.combineLatest是这种情况下的解决方案，不是吗？

Observable
  .combineLatest(
    this.route.params,
    this.route.queryParams,
    (params: any, queryParams: any) => {
      return {
        id: +params.id,
        pageSize: queryParams.pageSize ? +queryParams.pageSize: null
      }
    })
  .subscribe(bothParams => {
    this.id = bothParams.id;
    this.pageSize = bothParams.pageSize;
  });

Answer 2

我想如果您需要同时访问这两个快照是更好的选择。

未经测试（仅从头顶开始）

ngOnInit() {
    this.route
      .params
      .subscribe(params => {
        this.query = params['id'];
        this.offset = this.route.snapshot.queryParams['pageSize'];
        # find entries this.entryService.findEntries(this.query, this.pageSize);
      });
    });
  }

Answer 3

使用forkJoin怎么样？

ForkJoin允许您加入两个observable并等待它们的响应。您可以查看文档here并详细了解here。

至于你的代码，它看起来像这样：

ngOnInit() {
    Observable.forkJoin(this.route.params, this.route.queryParams).subscribe(bothParams => {
        // bothParams is an array, on the first index we have the router.params 
        // on the second index we have the queryParams
        this.query = bothParams[0].query;
        this.pageSize = bothParams[0].pageSize;
        this.entryService.findEntries(this.query, this.pageSize);
    });
  }

您可能需要添加导入：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';

Answer 4

我最近遇到了这种困境，找到符合我需求的最佳解决方案是Observable.merge。

如果您想在同一组件内观察params queryParams的更改（即使用过滤器搜索），则使用快照并不好。

Observable.forkJoin有一个限制，即必须触发两个observable才能工作，所以如果你有一个可能在params或queryParams中有变化的场景，但不一定在两者中，forkJoin就不会这样做。你好。

另一方面，

Observable.merge被触发，其中任何一个被触发。当然，这也有一些缺点，因为你可能会一个接一个地调用两个回调（在params和queryParams的开头）。

以下是一个例子：

Observable.merge(
  this.route.params.map(params => this.handleParams(params)),
  this.route.queryParams.map(queryParams => this.handleQueryParams(queryParams))
)
.subscribe(
  () => this.onParamsOrQueryParamsChange()
);

Answer 5

您可以尝试以下方法：

setTimeout(() => {
  this.route.queryParams
    .subscribe((params: Params) => {
      console.log('PARAMS',params);
      }
    });
},0);

在Angular 2中检索params和queryParams的最佳实践

5 个答案: