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

Question

我有多个搜索字段，我想在 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

或者应该怎么做？

Answer 1

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

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

您可以在 here

中阅读更多内容

Answer 2

选项 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'));
  }
}

结果URL

/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'));
  }
}

结果URL

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

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

What is the best way to store query paramaters in the URL dynamically?

javascript

routes

optional-parameters

typescript

angular

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

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