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...
In this video we will discuss how to subscribe to angular route parameter changes and then execute some code in response to those changes. In our previous video, we discussed there are 2 ways to read the route parameter values. We can either use the snapshot approach or observable approach. We discussed the snapshot approach in our previous video. In this video we will discuss the observable approach.
Snapshot approach works fine, if you navigate to another component before navigating from the current employee to the next employee. In our case we are always navigating back to the ListEmployeesComponent before navigating to view another employee details.
If you expect users to navigate from employee to employee directly, without navigating to another component first, then you need to use the observable approach.
For example, if we have "View Next Employee" button on EmployeeDetailsComponent and every time when we click this "View Next Employee" button, we want to display the next employee details on the page. Notice in this workflow, we are not navigating to another component before navigating from the current employee to the next employee. So the snapshot approach will not work. Let's try to use the snapshot approach and see what happens.
export class EmployeeDetailsComponent implements OnInit {
employee: Employee;
private _id;
constructor(private _route: ActivatedRoute, private _employeeService: EmployeeService, private _router: Router) { } ngOnInit() { this._id = +this._route.snapshot.paramMap.get('id'); this.employee = this._employeeService.getEmployee(this._id);
}
getNextEmployee() { if (this._id < 3) { this._id = this._id + 1; } else { this._id = 1; } this._router.navigate(['/employees', this._id]);
}
}
At this point, run the project and notice that, every time we click "View Next Employee" button the route parameter value changes as expected, but the employee details displayed on the page does not change. This is because the code in ngOnInit() is executed only when the component is first loaded and initialised.
After that, every time we click "View Next Employee" button, only the route parameter value changes and the component is not reinitialised and hence the code in ngOnInit() is not executed. If you want to react to route parameter changes and execute some code every time the route parameter value changes, then you have to subscribe to the route parameter changes. So modify the code in ngOnInit() method as shown below.
// The paramMap property returns an Observable. So subscribe to it
// if you want to react and execute some piece of code in response
// to the route parameter value changes
ngOnInit() {
this._route.paramMap.subscribe(params => { this._id = +params.get('id'); this.employee = this._employeeService.getEmployee(this._id);
});
}
With the above change in place, when we click "View Next Employee" button, the application works as expected.
Please note : paramMap is introduced in Angular 4. So if you are using Angular 4 or any version beyond it, then the above code works. If you are using Angular 2, then use params instead of paramMap as shown below.
ngOnInit() {
this._route.params.subscribe(params => { this._id = +params['id']; this.employee = this._employeeService.getEmployee(this._id);
});
}
Another important point to keep in mind : When we subscribe to an observable in a component, we also must write code to unsubscribe from the observable when the component is destroyed. However, for some observables we do not have to explicitly unsubscribe. The ActivatedRoute observable is one such observable. The angular Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it.
When to use snapshot over observable while reading route parameter values : Use snapshot approach if the route parameter value does not change and you only want to read the initial route parameter value. On the other hand, if you know the route parameter value changes, and if you want to react and execute some code in response to that change, then use the Observable approach.
asp.net core docker Subscribe to angular route parameter changes | |
123 Likes | 123 Dislikes |
15,304 views views | 524K followers |
Science & Technology | Upload TimePublished on 16 Apr 2018 |
Related keywords
tutorialspoint,csharp-video-tutorials.blogspot,tutorials dojo,csharp string format,central park 5,asp.net core github,craigslist nj,asp.net core 3,server status,server jobs nyc,asp.net core swagger,credit karma,services group,tutorials by hugo,csharp corner,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,csharp assembly,csharp array,tutorialspoint python,services briefcase,asp.net core web api,csharp enum,craigslist ny,server pro,server status ffxiv,csharp foreach,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,services technologies gps,csharp to json,college football,csharp dictionary,server jobs,cvs,cnn,costco hours,tutorialspoint sql,server side rendering,tutorialspoint spring,serverless,tutorialspoint spark,asp.net core download,csharp to vb.net,cool math games,services & training hse colombia sas,servicestack,citibank,asp.net core identity,asp.net core logging,tutorialsystems,cunyfirst,csharp download,services fms publish announcement,services.msc no abre,csharp online,csharp operator,asp.net core razor pages,server duties,asp.net core environment variables,tutorials near me,csharp random,server 2019,chernobyl,century 21,serverminer,services consultores,services consulting,services.msc,asp.net core configuration,csharp list,asp.net core tutorial,asp.net core mvc,server hosting,chase online,costco,server jobs near me,capital one,server rack,tutorialspoint html,csharp interface,craigslist,tutorialsteacher,tutorialspoint reactjs,asp.net core 2.2,services desk,tutorialspoint python 3,services transmission company sas,asp.net core signalr,services manager,csharp tutorial,tutorialspoint spring boot,asp.net core middleware,csharp online compiler,services tag dell,csharp switch,csharpstar,
Không có nhận xét nào:
Đăng nhận xét