typescript 角布线中特殊字符参数的获取

jvlzgdj9 于 2023-06-24 发布在 TypeScript

关注(0)|答案(3)|浏览(122)

这是我的路线

const routes: Routes = [{ path: 'file-view/:file_name', component: FileViewComponent },];

我的模板

<div *ngFor="let el of mapElement['fileItems']| filter:term">
    <a href="file-view/{{el['fileName']}}">
       <p>{{el['fileName'] }} ({{el['number']}})</p>
    </a>
</div>

这是为了获取file_name的值

ngOnInit(): void {
    this.fileName = this.route.snapshot.paramMap.get('file_name');
}

当我尝试访问端点“http：//localhost：4200/file-view/？模板锚标记中的“CSTARTUP%20（cstartup.r87）”
在这里，如果file_name参数有任何特殊字符，它将无法捕获它。它适用于简单的字符串，比如“cstartup.r87”，但我试图得到这样的东西“？CSTARTUP（cstartup.r87）”，并且失败。我怎么能把整个画成一个字符串呢？

typescript

来源：https://stackoverflow.com/questions/76444746/how-to-get-parameter-with-special-characters-in-angular-routing

3条答案

按热度按时间

jucafojl1#

首先：在路由名称中使用特殊字符是非常不好的做法。因此，如果您需要特殊字符，请使用查询参数作为示例。在这里你可以阅读所有关于html uri模式的内容。
你的问题是问号。为什么？在标准的html路径中，问号（？）告诉浏览器：* 这里有一个查询参数 *。所以Angular（或者纯JS）不能处理它。
如果你需要问号，让Angular用Router来做。所以不要在<a></a>中使用 href。试试这个：

<a [routerLink]="['/userdetails']" [queryParams]="{ id: '?CSTARTUP'}">User Details with query parameter</a>

<a [routerLink]="['/other']" [queryParams]="{ id: '?asdF.123'}">User Details with query parameter</a>

在.ts中，您可以使用router.navigate([....])并像这样设置查询参数：

this.router.navigate(
    ['/other'],
    { queryParams: { id: '?asdF.123' } }
  );

赞(0）回复(0）举报 2023-06-24

krcsximq2#

这相当于将uri编码为程序可以读取的内容，如果您不依赖现成的代码，则在发送文本时应始终使用encodeURIComponent()和decodeURIComponent()。

赞(0）回复(0）举报 2023-06-24

dwbf0jvd3#

我通过使用这个函数对fileName进行编码找到了答案。

encodeUriAll(value: string) {
return value.replace(/[^A-Za-z0-9]/g, c =>
  `%${c.charCodeAt(0).toString(16).toUpperCase()}`
);}

参考

赞(0）回复(0）举报 2023-06-24

我来回答

typescript 角布线中特殊字符参数的获取

3条答案

相关问题

热门标签

最新问答