Question

我的配置如下

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

如果我打来的话这是可行的

test / display / 5

但是我给它时找不到匹配的路线

test / display /？mode = 5

我不知道该怎么做

请帮助谢谢

Answer 1

这确实是不一样的，在路由器配置中声明：mode 可以通过设置？mode =来告诉Angular您正在声明角度 route参数。 5 ，您在网址中声明了查询参数。这些处理方式不同。

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

Answer 2

您必须为两个选项分别（辅助）定义路线：

`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

然后使用quryParams准备值：

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

Answer 3

尝试这种方式

constructor(private route: ActivatedRoute) { }

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

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

Answer 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 }]

是您想要的。然后你可以

test / display / 5

和

test / display /？mode = 5

要获取查询字符串值，您需要预订ActivateRoute服务的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'];

    });
  }
}

查询字符串与路径不匹配的角度6网址

4 个答案: