时间戳

首页 > 解决方案 > 角度 6 中的 url 中缺少查询参数

routing - 角度 6 中的 url 中缺少查询参数

问题描述

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

我给我的路线路径为：

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

我的网址需要作为

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

但网址的工作原理是：

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

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

标签： routingroutesangular6

解决方案

试试这种方法。堆栈闪电战示例

对查询参数使用这种方式 

{ 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>

推荐阅读