How to pass folder paths in Angular 6 Get API Method?

Question

In my angular application, I have to pass an Id and a folder path as a parameter in Angular 6.

Please see the below code snippet in typescript

let subDirectory: string = "folder1/folder2/folder3";
let id: number = 6 ;
this.http.get<ItemDetails[]>(this.appService.baseUrl + 'api/File/' + id + "/" + subDirectory)

Here the problem is: the API call becomes

this.http.get(this.appService.baseUrl + 'api/File/' + id + "/" + "folder1/folder2/folder3")

if we have only "folder1" as subdirectory then no issues. "/folder2/folder3" makes the issue

in Controller

[HttpGet("{id:int}/{subDirectotry?}")]
 [ResponseCache(NoStore = true)]
 public async Task<IActionResult> Get(int id, string subDirectotry)
 {
 }

Please, anyone, help me to achieve the same.

Answer 1

简单地说，定义一个函数以在您的服务中调用api

getItemsDetails (id: number, subDirectory: string) {
 return this.http.get<ItemDetails[]>(`${this.appService.baseUrl}api/File/${id}/${ subDirectory}`);
}

在componnet中打电话；

let subDirectory: string = "folder1/folder2/folder3";
let id: number = 6 ;
this.serviceName.getItemsDetails(id, subDirectory).subscribe(() => {
    // -> do what ever you want do with response.
})

Answer 2

很可能您会收到404错误，请尝试使用encodeURIComponent对 subDirectory 进行编码，然后尝试一次 unescape 您会收到请求。

Answer 3

您可以尝试使用{*}捕获所有路由参数，如下所示：

[HttpGet("{id:int}/{*subDirectotry}")]
[ResponseCache(NoStore = true)]
public async Task<IActionResult> Get(int id, string subDirectotry)
{
    return Ok();
}