Deep Linking with Query Parameters-CodePudding

I have got a search page with a few filters whose model is defined as below:

interface MyFilter {
    pageNumber: number;
    isSpecial: boolean;
    date?: DateTime;
    text?: string;
}

Each particular search on this page can be shared with a URL that has all these filters, similar to the below:

https://www.example.com/search?pageNumber=1&isSpecial=false

And I use the below code to put the current filters into the URL as query parameters for deep linking:

this.router.navigate([], {
    relativeTo: this.activatedRoute,
    queryParams: myFilter,
    replaceUrl: true
});

When I try to get the query params with the below code

this.activatedRoute.queryParams.subscribe(params => {
    ...
});

All values in params are strings whereas pageNumber should have been a number and isSpecial a boolean. So I am wondering if there is a way to get the correct data type from params?

CodePudding user response：

If I am not mistaken, all things passed in the url will be treated as strings, it is on you to properly parse them out to their correct types.

CodePudding user response：

Query params are strings and they need to be converted to desired types after fetching the values.

I passed queryParam value with a number value:

this.router.navigate([],
{
    relativeTo: this.route,
    queryParams: {myFilter: 1}
});

And when I retrieve the value:

this.route.queryParams.subscribe(params => {
    let myFilter = params['myFilter'];
    console.log(typeof myFilter) // The type will be string here
   // You need to use any string to number approach to convert them manually
   let converted =  myFilter;
   console.log(converted) // number
});