带有查询字符串的角度6 url与路径不匹配答案

【问题标题】：angular 6 url with query string not matching path带有查询字符串的角度6 url与路径不匹配
【发布时间】：2020-03-10 04:53:59
【问题描述】：

我有以下配置

 { path:'test/display/:mode' ,component:DisplayComponent }

如果我像这样打电话，这是可行的

测试/显示/5

但是当我给它时它无法找到匹配的路线

测试/显示/?mode=5

我不知道怎么做

请帮忙谢谢

【问题讨论】：

为什么要将参数作为查询字符串传递？
@SuhasMandumale，我正在从另一个应用程序获取此网址
试试这个：this.route.navigateByUrl("/test/display?mode=5");
@PrashantPimpale，这是什么意思？我从其他应用程序获取此网址
@Md.ParvezAlam 知道你想允许这个 URL 服务是你的组件吗？可以提供 stackblitz 演示吗？

标签： angular angular6 angular-routing

【解决方案1】：

您必须为这两个选项定义不同的路线（辅助）：

const routes: Routes = [
    { path: 'test/:mode', component: TestComponent }, // for path variables
    { path: 'test', component: TestComponent }  // for query params
];

对于第一个，您的网址将如下所示：

http://localhost:4200/test/20

第二个：

http://localhost:4200/test?mode=20

然后使用queryParams 读取值：

constructor(private route: ActivatedRoute) { 
   this.route.queryParams.subscribe(params => {
        console.log(params['mode']);
    });
}

【讨论】：

会有localhost:4200/test/?mode=20, (/ before > ?)
没关系，一旦 Angular 使用了 url，'/' 就会被删除。我可以导航到带有或不带有“/”的页面。
我做不到，它正在从 url 中删除 /，url 应该保持不变，
我不明白，如果没有'/'会不会有问题？你想达到什么目的？如果只是解决路线是问题，那么上面的工作。如果您正在尝试其他方法，请告诉我？
是的，我将 Angular 应用程序注入 .net mvc 以获取单个页面，因此 url 应该是完整的

【解决方案2】：

这确实不一样，在你的路由器配置中声明 :mode 告诉 Angular 你正在声明一个角度 路由参数，通过设置 ?mode= 5 在您声明一个查询参数的网址中。这些处理方式不同。

关于如何使用查询参数的好 stackoverflow 文章： How to get query parameters from URL in Angular 5?

【讨论】：

【解决方案3】：

试试这个方法

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    if(this.route.snapshot.paramMap.get('mode')){
        // if mode 
    }else {
        // if not mode
    }
}

{ path:'test/display' ,component:DisplayComponent }

【讨论】：

【解决方案4】：

路由指定它必须在末尾有一个模式参数，因此在路径末尾没有模式参数的替代形式是不同的。

{ path:'test/display/:mode' ,component:DisplayComponent }

如果不同于：

{ path:'test/display/' ,component:DisplayComponent }

查询字符串根本不是路由的一部分，所以加一不等同于“:mode”。

因此，如果您想支持路由参数和查询字符串，您只需指定这两个替代路由即可。通常，最佳做法是仅将路由参数用于所需参数，例如您正在请求/更新的资源的 id。查询字符串参数最适合用于可选参数，例如搜索选项、数据窗口或算法调整。

[{ path:'test/display/:mode' ,component:DisplayComponent },
{ path:'test/display/' ,component:DisplayComponent }]

是你想要的。然后就可以了

测试/显示/5

和

测试/显示/?mode=5

要获取查询字符串值需要订阅激活路由服务的queryParams。

import { Component, OnInit} from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

export class ExampleComponent implements OnInit {

  public mode = null;

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe((qp: Params) => {
        this.mode = qp['mode'];

    });
  }
}

【讨论】：