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

g6ll5ycj  于 2023-02-14  发布在  TypeScript
关注(0)|答案(6)|浏览(170)

我试图理解创建路由的方法,在它的URL参数中包含一些信息。
这是我的路线(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,它返回找到的条目。

rdrgkggo

rdrgkggo1#

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

1tuwyuhd2#

我猜如果您需要同时访问这两个,快照是更好的选择。
未测试(仅从我的头顶)

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

pexxcrt23#

使用forkJoin怎么样?
ForkJoin允许你连接两个观察对象并等待它们的响应。你可以查看文档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';
yc0p9oo0

yc0p9oo04#

我最近遇到了这个难题,我发现适合我需要的最佳解决方案是使用Observable.merge
如果你想在同一个组件中观察params queryParams的变化(例如,使用过滤器搜索),使用快照是不好的。
Observable.forkJoin有一个限制,即必须同时触发两个可观察变量才能工作,因此,如果您遇到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()
);
ma8fv8wu

ma8fv8wu5#

你可以试试这个:

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

cgh8pdjw6#

2023
但对一些人来说,这仍然是一场斗争。
我发现实际上在你的app.组件中可以做以下事情

this._router.events.pipe(startWith(this._router)).subscribe((event) => {
    let queryparams;
    let url; 
    if (event instanceof ActivationEnd) {
        queryparams = event.snapshot.queryparams;
    }
    if (event instanceof NavigationEnd) {
        SomeService.routevent.next({url:event.url,queryparams:queryparams});
    }
});

创建一个服务并给予它一个BehaviourSubject路由事件,然后无论你需要什么组件或位置的最新url或queryparams

相关问题