JavaScript Edu Resources. Angular Courses. React Tutorials. Join us!

Angular 2 Router

  • To see how it works, let’s tweak our configuration from above.Where ConversationsResolver is defined as follows:Finally, we need to register ConversationsResolver when bootstrapping our application.Now when navigating to ‘/inbox’, the router will create a router state, with an activated route for the conversations component.
  • Using this parameter with the current user, we can fetch all the inbox conversations for that user.We can access the resolved data by injecting the activated route object into the conversations component.Activating ComponentsAt this point, we have a router state.
  • The router can now activate this state by instantiating all the needed components, and placing them into appropriate router outlets.To understand how it works, let’s take a look at how we use router outlets in a component template.The root component of our application has two outlets: primary and popup.Other components, such as ConversationCmp, have only one.Now imagine we are navigating to what the router will do.
  • Then the router will use this URL to construct a new router state.Next, the router will instantiate the conversation and message components.Now, let’s say the message component has the following link in its template:a [routerLink]=” [‘/’, {outlets: {popup: [‘message’, this.id]}}]”Edit/aThe router link directive will take the array and will set the href attribute the user triggers a navigation by clicking on the link.
  • We learned about the core operations of the Angular router: applying redirects, state recognition, running guards and resolving data, component activation, and navigation.



Angular Router – Angular



Comments are closed, but trackbacks and pingbacks are open.