角度 6 中的 url 中缺少查询参数答案

【问题标题】：query params are missing from the url in angular 6角度 6 中的 url 中缺少查询参数
【发布时间】：2019-10-18 10:15:18
【问题描述】：

直接输入的url没有在url中显示查询参数。

我的路线路径为：

{ path: 'userdetails/:id', component: userdetailscomponent}

我的网址需要像

https://www.(site).com/userdetails?id=5.

但网址的工作原理是：

https://www.(site).com/userdetails

直接在浏览器中打开 url 时，查询参数不显示。查询参数正在消失，并且 url 将在没有查询参数的情况下进入主路由。我怎样才能让查询参数工作，他们有什么方法可以获取丢失的查询参数？

【问题讨论】：

参考这篇文章以更好地了解“路由参数”(youtu.be/KefdTtsoKjY)
谢谢，但这里的问题是，如果管理员直接使用短信或电子邮件将 url 发送给用户并添加他们的 id ，那么当直接打开 url 时，查询参数会丢失。我根本看不到查询参数。
1.这不是您问的问题，请参考此问题 (stackoverflow.com/help/how-to-ask) 2. 当您共享带有或不带有查询参数的 url 时，浏览器或电子邮件客户端不会将其作为查询参数进行定位。它将充当基本网址。因此，当您共享 url 并且缺少参数时，我建议您查看共享功能。因为 url 是一个字符串。 {{HOST}}/{{BASE}}/events/find/available-venue?startDate=2019-10-10&startTime=06:00&endDate=2019-10-10&endTime=23:00 是一个有效的 API，您可以按原样共享它！

标签： routing routes angular6

【解决方案1】：

试试这种方法。 stackblitz example

查询参数用这种方式

{ path: "userdetails", component: UserDetailsComponent}

在你的打字稿文件中

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

userId;
constructor(private activatedRoute: ActivatedRoute) { }

ngOnInit() {
  this.activatedRoute.queryParams.subscribe(params => {
    this.userId = params['id'] || 0;
  });
}

在您的 html 文件中

<div *ngIf="userId; else userDetail">
   <h2>User Details for the user with id {{userId}}</h2>
</div>

<ng-template #userDetail>
   User Details Component
</ng-template>

如何使用这个

Here sends query param id value as 15
<a [routerLink]="['/userdetails']" [queryParams]="{ id: 15}">User Details 
 with query parameter</a>

Without query parameters 
<a [routerLink]="['/userdetails' ]">User Details</a>

【讨论】：