typescript 直接在路由模块中使用查询参数设置路由路径,无需导航到路由

zynd9foi  于 2023-05-30  发布在  TypeScript
关注(0)|答案(2)|浏览(204)

在电子邮件中会有一个链接,当那个链接被点击时,我想打开列表组件。
该链接的URL将是这样的:
http://localhost:4200/list?密钥= SdmfbjaBJHKbbjbv 47 g +ffh/fbf

  • Key=SdmfbjaBJHKbbjbv47g+ffh/fbf*

在这个链接中,Key中可以有任何类型值,我只需要在打开具有表单的列表组件时获得该值,然后我就可以发送表单值和键。
我想在路由模块的路由数组中设置路径,但这只适用于:
http://localhost:4200/list/SdmfbjaBJHKbbjbv47g + ffh/fbf

{path:'list:key', component:ListComponent},

我在努力:
http://localhost:4200/list?密钥= SdmfbjaBJHKbbjbv 47 g +ffh/fbf

{path:'list?Key=:key', component:ListComponent},
cvxl0en2

cvxl0en21#

不能在路由路径中直接指定查询参数。查询参数用于向路由传递附加信息,但它们不是路由本身的一部分。
修改路由配置以从路径中删除查询参数

{ path: 'list', component: ListComponent }

在ListComponent中,导入必要的模块

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

export class ListComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      const key = params['Key'];
      // Use the 'key' value as needed in your component
    });
  }
}

当点击链接时,Angular将导航到ListComponent,并调用ngOnInit方法。在该方法中,订阅了queryParams observable,允许您从URL中提取Key值
希望对你有帮助。

yduiuuwa

yduiuuwa2#

你不需要在routes数组中声明查询参数。
路线:
{path:'list', component:ListComponent},
ListComponent(示例):

constructor(private route: ActivatedRoute){}

...some code...

this.route.queryParams.subscribe((params) => params['key'])

or

this.route.snapshot.queryParams['key']

相关问题