W3cubDocs

/Angular 12

RouterModule

ngmodule

Adds directives and providers for in-app navigation among views defined in an application. Use the Angular Router service to declaratively specify application states and manage state transitions.

See more...

class RouterModule {
  static forRoot(routes: Route[], config?: ExtraOptions): ModuleWithProviders<RouterModule>
  static forChild(routes: Route[]): ModuleWithProviders<RouterModule>
}

See also

Description

You can import this NgModule multiple times, once for each lazy-loaded bundle. However, only one Router service can be active. To ensure this, there are two ways to register routes when importing this module:

  • The forRoot() method creates an NgModule that contains all the directives, the given routes, and the Router service itself.
  • The forChild() method creates an NgModule that contains all the directives and the given routes, but does not include the Router service.

Static methods

forRoot()

Creates and configures a module with all the router providers and directives. Optionally sets up an application listener to perform an initial navigation.

static forRoot(routes: Route[], config?: ExtraOptions): ModuleWithProviders<RouterModule>

Parameters
routes Route[]

An array of Route objects that define the navigation paths for the application.
config ExtraOptions

An ExtraOptions configuration object that controls how navigation is performed.

Optional. Default is undefined.
Returns

ModuleWithProviders<RouterModule>: The new NgModule.

When registering the NgModule at the root, import as follows:

@NgModule({
  imports: [RouterModule.forRoot(ROUTES)]
})
class MyNgModule {}
forChild()

Creates a module with all the router directives and a provider registering routes, without creating a new Router service. When registering for submodules and lazy-loaded submodules, create the NgModule as follows:

static forChild(routes: Route[]): ModuleWithProviders<RouterModule>

Parameters
routes Route[]

An array of Route objects that define the navigation paths for the submodule.
Returns

ModuleWithProviders<RouterModule>: The new NgModule.

 
@NgModule({
  imports: [RouterModule.forChild(ROUTES)]
})
class MyNgModule {}

Directives

Name Description 
RouterLink

When applied to an element in a template, makes that element a link that initiates navigation to a route. Navigation opens one or more routed components in one or more <router-outlet> locations on the page.

 
RouterLinkActive

Tracks whether the linked route of an element is currently active, and allows you to specify one or more CSS classes to add to the element when the linked route is active.

 
RouterLinkWithHref

Lets you link to specific routes in your app.

 
RouterOutlet

Acts as a placeholder that Angular dynamically fills based on the current router state.

© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/router/RouterModule