Routing uses the browser’s URL to choose which component appears in a router-outlet. It keeps the application’s navigation structure in a route configuration rather than spreading display decisions across components. The Router service lets a component or directive initiate that navigation in code; use routerLink when an element only needs to navigate on a click. section 24.0 section 24.3.3
To set up routing:
- Define routes that map paths to components, then pass them to RouterModule.forRoot. Put more specific routes before less specific ones: Angular checks them in order. section 24.2.1
- Place <router-outlet></router-outlet> where the selected component should appear. Keep a base element in the HTML document so Angular can apply the routes. section 6.3.2
- Import RouterModule into a feature module whose templates use routerLink. Use RouterModule.forChild for routes in a dynamically loaded module. section 6.3.3 section 27.3.2
Navigate after an action
Suppose an Add To Cart action should display the cart. Inject Router into the store component’s constructor, then call this.router.navigateByUrl('/cart') in the action method. A cart-summary button can instead use routerLink="/cart"; disabling that button while the cart is empty prevents navigation until there is something to view. In a product form, the same service navigates back to the root URL after Save or Create. section 6.3.3 section 24.3.3
Table 24.9. Selected Router methods and properties
|
Name
|
Description
|
|
navigated
|
This
boolean property returns
true if there has been at least one navigation event and
false otherwise.
|
|
url
|
This property returns the active URL.
|
|
isActive(url, exact)
|
This method returns
true if the specified URL is the URL defined by the active route. The
exact argument specified whether all the segments in the specified URL must match the current URL for the method to return
true.
|
|
events
|
This property returns an
Observable<Event> that can be used to monitor navigation changes. See the “Receiving Navigation Events” section for details.
|
|
navigateByUrl(url, extras)
|
This method navigates to the specified URL. The result of the method is a
Promise, which resolves with
true when the navigation is successful and
false when it is not, and which is rejected when there is an error.
|
|
navigate(commands, extras)
|
This method navigates using an array of segments. The
extras object can be used to specify whether the change of URL is relative to the current route. The result of the method is a
Promise, which resolves with
true when the navigation is successful and
false when it is not, and which is rejected when there is an error.
|
The Router API table distinguishes navigation methods from properties for reading the current URL or observing navigation events. section 24.3.3
When navigation changes the URL, Angular matches a route, creates its component, and displays its template in the outlet. In the table-and-form example, moving to /form/create does not request new content from the server. If navigation selects an unexpected component, check route order first. Routing can also replace event bindings and shared state used solely to coordinate which component is shown. section 24.2.6 section 24.2.1 section 24.3.5
As an application grows, wildcard routes can provide a fallback, redirection routes can change the destination, and child routes can display nested components. Plan the URL structure: a configuration assembled ad hoc can become difficult to manage. section 25.5 section 24.0
