What it does
Represents router configuration.
Interface Overview
interface Routes { }
Interface Description
Routes
is an array of route configurations. Each one has the following properties:
-
path
is a string that uses the route matcher DSL. -
pathMatch
is a string that specifies the matching strategy. -
component
is a component type. -
redirectTo
is the url fragment which will replace the current matched segment. -
outlet
is the name of the outlet the component should be placed into. -
canActivate
is an array of DI tokens used to look up CanActivate handlers. SeeCanActivate
for more info. -
canActivateChild
is an array of DI tokens used to look up CanActivateChild handlers. SeeCanActivateChild
for more info. -
canDeactivate
is an array of DI tokens used to look up CanDeactivate handlers. SeeCanDeactivate
for more info. -
data
is additional data provided to the component viaActivatedRoute
. -
resolve
is a map of DI tokens used to look up data resolvers. SeeResolve
for more info. -
children
is an array of child route definitions.
Simple Configuration
[{ path: 'team/:id', component: Team, children: [ { path: 'user/:name', component: User } ] }]
When navigating to /team/11/user/bob
, the router will create the team component with the user component in it.
Multiple Outlets
[{ path: 'team/:id', component: Team }, { path: 'chat/:user', component: Chat outlet: aux }]
When navigating to /team/11(aux:chat/jim)
, the router will create the team component next to the chat component. The chat component will be placed into the aux outlet.
Wild Cards
[{ path: '**', component: Sink }]
Regardless of where you navigate to, the router will instantiate the sink component.
Redirects
[{ path: 'team/:id', component: Team, children: [ { path: 'legacy/user/:name', redirectTo: 'user/:name' }, { path: 'user/:name', component: User } ] }]
When navigating to '/team/11/legacy/user/jim', the router will change the url to '/team/11/user/jim', and then will instantiate the team component with the user component in it.
If the redirectTo
value starts with a '/', then it is an absolute redirect. E.g., if in the example above we change the redirectTo
to /user/:name
, the result url will be '/user/jim'.
Empty Path
Empty-path route configurations can be used to instantiate components that do not 'consume' any url segments. Let's look at the following configuration:
[{ path: 'team/:id', component: Team, children: [ { path: '', component: AllUsers }, { path: 'user/:name', component: User } ] }]
When navigating to /team/11
, the router will instantiate the AllUsers component.
Empty-path routes can have children.
[{ path: 'team/:id', component: Team, children: [ { path: '', component: WrapperCmp, children: [ { path: 'user/:name', component: User } ] } ] }]
When navigating to /team/11/user/jim
, the router will instantiate the wrapper component with the user component in it.
Matching Strategy
By default the router will look at what is left in the url, and check if it starts with the specified path (e.g., /team/11/user
starts with team/:id
).
We can change the matching strategy to make sure that the path covers the whole unconsumed url, which is akin to unconsumedUrl === path
or $
regular expressions.
This is particularly important when redirecting empty-path routes.
[{ path: '', pathMatch: 'prefix', //default redirectTo: 'main' }, { path: 'main', component: Main }]
Since an empty path is a prefix of any url, even when navigating to '/main', the router will still apply the redirect.
If pathMatch: full
is provided, the router will apply the redirect if and only if navigating to '/'.
[{ path: '', pathMatch: 'full', redirectTo: 'main' }, { path: 'main', component: Main }]
Componentless Routes
It is useful at times to have the ability to share parameters between sibling components.
Say we have two components--ChildCmp and AuxCmp--that we want to put next to each other and both of them require some id parameter.
One way to do that would be to have a bogus parent component, so both the siblings can get the id parameter from it. This is not ideal. Instead, you can use a componentless route.
[{ path: 'parent/:id', children: [ { path: 'a', component: MainChild }, { path: 'b', component: AuxChild, outlet: 'aux' } ] }]
So when navigating to parent/10/(a//aux:b)
, the route will instantiate the main child and aux child components next to each other. In this example, the application component has to have the primary and aux outlets defined.
The router will also merge the params
, data
, and resolve
of the componentless parent into the params
, data
, and resolve
of the children.
This is especially useful when child components are defined as follows:
[{ path: 'parent/:id', children: [ { path: '', component: MainChild }, { path: '', component: AuxChild, outlet: 'aux' } ] }]
With this configuration in place, navigating to '/parent/10' will create the main child and aux components.
Lazy Loading
Lazy loading speeds up our application load time by splitting it into multiple bundles, and loading them on demand. The router is designed to make lazy loading simple and easy. Instead of providing the children property, you can provide the loadChildren property, as follows:
[{ path: 'team/:id', component: Team, loadChildren: 'team' }]
The router will use registered NgModuleFactoryLoader to fetch an NgModule associated with 'team'. Then it will extract the set of routes defined in that NgModule, and will transparently add those routes to the main configuration.
exported from @angular/router/index, defined in @angular/router/src/config.ts
Please login to continue.