在 URL 中动态存储查询参数的最佳方式是什么？答案

【问题标题】：What is the best way to store query paramaters in the URL dynamically?在 URL 中动态存储查询参数的最佳方式是什么？
【发布时间】：2020-06-09 10:38:29
【问题描述】：

我有多个搜索字段，我想将查询参数存储在 URL 中，但我不知道该怎么做。

组件的路径如下所示：

const routes: Routes = [
  {path: 'detailedview/:type/:id', component: DetailViewComponent}
];

:type 和 :id 是固定值。在这些值之后，我需要附加这样一个 url 段 q=...&title=...&... 长度因填写的字段而异。然后我需要以某种方式获取数据。

你认为我应该在我的路径中添加以下内容吗：

{path: 'detailedview/:type/:id/:queryParams', component: DetailViewComponent}

然后获取整个段并遍历该段左右：

this.queryParams = this.route.snapshot.paramMap.get('queryParams');
// assign the values from this.queryParams to other variables

或者应该怎么做？

【问题讨论】：

标签： javascript angular typescript routes optional-parameters

【解决方案1】：

选项 1：作为可选参数发送

路线配置

const routes: Routes = [
  {path: 'detailedview/:type/:id', component: DetailViewComponent}
];

导航来源

navigateToPath() {
  const optionalParams = {
    title: 'Sample',
    q: 'Sample',
    ...
  }
  this._router.navigate(['/detailedview', 'sampleType', 1, {optionalParams: JSON.stringify(optionalParams)}]);
}

导航收件人

import { ActivatedRoute } from '@angular/router';

export class DetailViewComponent implements OnInit {
  constructor(private _actRoute: ActivatedRoute) { }

  ngOnInit() {
    this.optionalParams = JSON.parse(this._actRoute.snapshot.paramMap.get('optionalParams'));
  }
}

结果网址

/detailedview/sampleType/1;optionalParams=<Object>

选项 2：作为查询参数发送

路线配置

const routes: Routes = [
  {path: 'detailedview/:type/:id', component: DetailViewComponent}
];

导航来源

navigateToPath() {
  const params = {
    title: 'Sample',
    q: 'Sample',
    ...
  }
  this._router.navigate(['/detailedview', 'sampleType', 1], {queryParams: params});
}

导航收件人

import { ActivatedRoute } from '@angular/router';

export class DetailViewComponent implements OnInit {
  constructor(private _actRoute: ActivatedRoute) { }

  ngOnInit() {
    this.type = this._actRoute.snapshot.paramMap.get('type');
    this.title = this._actRoute.snapshot.queryParamMap.get('title'));
    this.q = this._actRoute.snapshot.queryParamMap.get('q'));
  }
}

结果网址

/detailedview/sampleType/1?title=Sample&q=Sample

【讨论】：

【解决方案2】：

好吧，你几乎自己回答了。唯一的事情是您不需要声明您在路由器中使用查询参数。从查询参数中检索标题的示例：

title= this.route.snapshot.paramMap.get('title');

您可以在here阅读更多内容

【讨论】：

我知道你的意思，但在我的情况下，:queryParams 应该包含多个值。 queryParams 可以是 title=Hello&q=Johann...，但它也可以只有一个值：q=Johan 所以没有标题。你明白我的意思吗？我需要此段中存在的所有值并将其分配给正确的变量。
你可以使用 this.route.queryParamMap.subscribe(params => this.words = params.getAll('words'));在这里阅读更多stackoverflow.com/questions/57063455/…