Text version of the video
http://csharp-video-tutorials.blogspo...
Slides
http://csharp-video-tutorials.blogspo...
Angular CRUD Tutorial
https://www.youtube.com/playlist?list...
Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspo...
All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...
All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatAr...
Query parameters are usually used when you want the parameters on the route to be optional and when you want to retain those parameters across multiple routes. For example, on the LIST route, you search for a specific employee. You then click on one of the employees in the search results to view that specific employee details on the DETAILS route. At this point, when we navigate back to the LIST route we want to retain the search term used, so we can display the filtered list instead of the full employee list.
Just like optional route parameters, query parameters are not part of the route configuration and therefore they are not used in route pattern matching.
Passing query string parameters in code : We use the second argument of the Router service navigate() method to pass query string parameters.
1. Create an object with queryParams as the key.
2. The value is an object with key/value pairs.
3. The key is the name of the query parameter and the value is the value for the query parameter.
this._router.navigate(['employees', employeeId], {
queryParams: { 'searchTerm': this.searchTerm, 'testParam': 'testValue' }
});
The query string parameters start with a question mark and are separated by & as you can see below.
http://localhost:4200/employees/3?sea...
Passing query string parameters in the HTML
[a [routerLink]="['/employees']"
[queryParams]="{ 'searchTerm': 'john', 'testParam': 'testValue'}"] List
[/a]
Preserve or Merge Query String Parameters : By default, the query string parameters are not preserved or merged when navigating to a different route. To preserve or merge Query Params set queryParamsHandling to either preserve or merge respectively.
Preserve query string parameters in code
this._router.navigate(['/employees', this._id], {
queryParamsHandling: 'preserve'
});
Please note : queryParamsHandling is available in Angular 4 and later versions. If you are using Angular 2, you would not have queryParamsHandling. You will have to use preserveQueryParams and set it to true. preserveQueryParams is deprecated since Angular 4.
Merge query string parameters in code :
this._router.navigate(['/employees', this._id], {
queryParams: { 'newParam': 'newValue' },
queryParamsHandling: 'merge'
});
Preserve query string parameters in the HTML :
[a [routerLink]="['/list']"
queryParamsHandling="preserve"] Back to List
[/a]
Merge query string parameters in the HTML :
[a [routerLink]="['/list']"
[queryParams]="{'newParam': 'newValue'}" queryParamsHandling="merge"] Back to List
[/a]
Next Video : How to read query params.
asp.net core docker Angular query params | |
109 Likes | 109 Dislikes |
21,298 views views | 524K followers |
Science & Technology | Upload TimePublished on 21 May 2018 |
Related keywords
tutorialspoint,webkinz,tutorials dojo,central park 5,webadvisor,asp.net core github,craigslist nj,asp.net core 3,server status,server jobs nyc,asp.net core swagger,weber grill parts,credit karma,services group,webtoon,tutorials by hugo,server error in '/' application,servers for minecraft,asp.net core dependency injection,services windows,asp.net core 3.0,tutorialspoint c#,services angular,calculator,tutorialspoint tableau,services google play apk,asp.net core 3 release date,server job description,tutorials by a,servicenow,webcam,webmd symptom,tutorialspoint python,services briefcase,asp.net core web api,craigslist ny,server pro,server status ffxiv,webcrims,cheap flights,server memes,asp.net core hosting,services sas,services online,chase,tutorialspoint java,serverless architecture,tutorialspoint java compiler,server resume,server books,tutorialspoint javascript,webmd,services technologies gps,college football,server jobs,cvs,website,cnn,website builder,costco hours,tutorialspoint sql,server side rendering,weber grills,tutorialspoint spring,serverless,tutorialspoint spark,asp.net core download,cool math games,webster bank,services & training hse colombia sas,servicestack,citibank,asp.net core identity,webstaurant,asp.net core logging,tutorialsystems,cunyfirst,services fms publish announcement,services.msc no abre,asp.net core razor pages,server duties,asp.net core environment variables,tutorials near me,server 2019,web of dreams,chernobyl,century 21,serverminer,webassign,services consultores,services consulting,services.msc,asp.net core configuration,asp.net core tutorial,asp.net core mvc,server hosting,chase online,costco,server jobs near me,webex,capital one,server rack,tutorialspoint html,craigslist,tutorialsteacher,webroot,tutorialspoint reactjs,asp.net core 2.2,services desk,tutorialspoint python 3,webster,services transmission company sas,asp.net core signalr,services manager,tutorialspoint spring boot,asp.net core middleware,services tag dell,web store,webmail,
Không có nhận xét nào:
Đăng nhận xét