angular-cn/aio/dist/generated/docs/api/router.json

{
  "id": "api/router",
  "title": "@angular/router",
  "contents": "\n\n<article>\n  <div class=\"breadcrumb-container\">\n    <div class=\"breadcrumb\">\n      <script type=\"application/ld+json\">\n        {\n          \"@context\": \"http://schema.org\",\n          \"@type\": \"BreadcrumbList\",\n          \"itemListElement\": [\n            { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n            { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/router\", \"name\": \"@angular/router\" } }\n          ]\n        }\n      </script>\n        <a href=\"/api\">API</a>\n    </div>\n    <div class=\"github-links\">\n  <a href=\"https://github.com/angular/angular/edit/master/packages/router/PACKAGE.md?message=docs(...)%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n  <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/router/PACKAGE.md\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n  </div>\n  \n<header class=\"api-header\">\n  <h1 id=\"angularrouter\">@angular/router<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router#angularrouter\"><i class=\"material-icons\">link</i></a></h1>\n  <label class=\"api-type-label package\">package</label>\n  \n  \n  \n</header>\n\n  <aio-toc class=\"embedded\"></aio-toc>\n\n  <div class=\"api-body\">\n    <p>Implements the Angular Router service , which enables navigation from one view to the next as users perform application tasks.</p>\n\n  <p>Defines the <code><a href=\"api/router/Route\" class=\"code-anchor\">Route</a></code> object that maps a URL path to a component, and the <code><a href=\"api/router/RouterOutlet\" class=\"code-anchor\">RouterOutlet</a></code> directive\nthat you use to place a routed view in a template, as well as a complete API for configuring, querying, and controlling the router state.</p>\n<p>Import <code><a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a></code> to use the Router service in your app.\nFor more usage information, see the <a href=\"guide/router\">Routing and Navigation</a> guide.</p>\n\n\n  \n\n\n  \n  <h2 id=\"entry-points\">Entry points<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router#entry-points\"><i class=\"material-icons\">link</i></a></h2>\n  \n  \n  \n  <section class=\"export-list\">\n    <h3 id=\"primary\">Primary<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router#primary\"><i class=\"material-icons\">link</i></a></h3>\n    <table class=\"is-full-width list-table\">\n      \n      <tbody><tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router#primary-entry-point-exports\">@angular/router</a></code></td>\n        <td>\n          \n          <p>Implements the Angular Router service , which enables navigation from one view to the next as users perform application tasks.</p>\n\n        </td>\n      </tr>\n      \n    </tbody></table>\n  </section>\n  \n\n  \n  \n  \n  <section class=\"export-list\">\n    <h3 id=\"secondary\">Secondary<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router#secondary\"><i class=\"material-icons\">link</i></a></h3>\n    <table class=\"is-full-width list-table\">\n      \n      <tbody><tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/testing\">@angular/router/testing</a></code></td>\n        <td>\n          \n          <p>Supplies a testing module for the Angular <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> subsystem.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/upgrade\">@angular/router/upgrade</a></code></td>\n        <td>\n          \n          <p>Provides support for upgrading routing applications from Angular JS to Angular.</p>\n\n        </td>\n      </tr>\n      \n    </tbody></table>\n  </section>\n  \n\n  \n\n  <h2 id=\"primary-entry-point-exports\">Primary entry point exports<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router#primary-entry-point-exports\"><i class=\"material-icons\">link</i></a></h2>\n  \n  \n  \n  \n  \n  <section class=\"export-list\">\n    <h3 id=\"ngmodules\">NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router#ngmodules\"><i class=\"material-icons\">link</i></a></h3>\n    <table class=\"is-full-width list-table\">\n      \n      <tbody><tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RouterModule\">RouterModule</a></code></td>\n        <td>\n          \n          <p>Adds directives and providers for in-app navigation among views defined in an application.\nUse the Angular <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> service to declaratively specify application states and manage state\ntransitions.</p>\n\n        </td>\n      </tr>\n      \n    </tbody></table>\n  </section>\n  \n\n  \n  \n  \n  <section class=\"export-list\">\n    <h3 id=\"classes\">Classes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router#classes\"><i class=\"material-icons\">link</i></a></h3>\n    <table class=\"is-full-width list-table\">\n      \n      <tbody><tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ActivationEnd\">ActivationEnd</a></code></td>\n        <td>\n          \n          <p>An event triggered at the end of the activation part\nof the Resolve phase of routing.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ActivationStart\">ActivationStart</a></code></td>\n        <td>\n          \n          <p>An event triggered at the start of the activation part\nof the Resolve phase of routing.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/BaseRouteReuseStrategy\">BaseRouteReuseStrategy</a></code></td>\n        <td>\n          \n          <p>This base route reuse strategy only reuses routes when the matched router configs are\nidentical. This prevents components from being destroyed and recreated\nwhen just the fragment or query parameters change\n(that is, the existing component is <em>reused</em>).</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ChildActivationEnd\">ChildActivationEnd</a></code></td>\n        <td>\n          \n          <p>An event triggered at the end of the child-activation part\nof the Resolve phase of routing.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ChildActivationStart\">ChildActivationStart</a></code></td>\n        <td>\n          \n          <p>An event triggered at the start of the child-activation\npart of the Resolve phase of routing.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ChildrenOutletContexts\">ChildrenOutletContexts</a></code></td>\n        <td>\n          \n          <p>Store contextual information about the children (= nested) <code><a href=\"api/router/RouterOutlet\" class=\"code-anchor\">RouterOutlet</a></code></p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/DefaultUrlSerializer\">DefaultUrlSerializer</a></code></td>\n        <td>\n          \n          <p>A default implementation of the <code><a href=\"api/router/UrlSerializer\" class=\"code-anchor\">UrlSerializer</a></code>.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/GuardsCheckEnd\">GuardsCheckEnd</a></code></td>\n        <td>\n          \n          <p>An event triggered at the end of the Guard phase of routing.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/GuardsCheckStart\">GuardsCheckStart</a></code></td>\n        <td>\n          \n          <p>An event triggered at the start of the Guard phase of routing.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/NavigationCancel\">NavigationCancel</a></code></td>\n        <td>\n          \n          <p>An event triggered when a navigation is canceled, directly or indirectly.\nThis can happen when a route guard\nreturns <code>false</code> or initiates a redirect by returning a <code><a href=\"api/router/UrlTree\" class=\"code-anchor\">UrlTree</a></code>.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/NavigationEnd\">NavigationEnd</a></code></td>\n        <td>\n          \n          <p>An event triggered when a navigation ends successfully.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/NavigationError\">NavigationError</a></code></td>\n        <td>\n          \n          <p>An event triggered when a navigation fails due to an unexpected error.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/NavigationStart\">NavigationStart</a></code></td>\n        <td>\n          \n          <p>An event triggered when a navigation starts.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/NoPreloading\">NoPreloading</a></code></td>\n        <td>\n          \n          <p>Provides a preloading strategy that does not preload any modules.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/OutletContext\">OutletContext</a></code></td>\n        <td>\n          \n          <p>Store contextual information about a <code><a href=\"api/router/RouterOutlet\" class=\"code-anchor\">RouterOutlet</a></code></p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/PreloadAllModules\">PreloadAllModules</a></code></td>\n        <td>\n          \n          <p>Provides a preloading strategy that preloads all modules as quickly as possible.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/PreloadingStrategy\">PreloadingStrategy</a></code></td>\n        <td>\n          \n          <p>Provides a preloading strategy.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ResolveEnd\">ResolveEnd</a></code></td>\n        <td>\n          \n          <p>An event triggered at the end of the Resolve phase of routing.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ResolveStart\">ResolveStart</a></code></td>\n        <td>\n          \n          <p>An event triggered at the start of the Resolve phase of routing.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RouteConfigLoadEnd\">RouteConfigLoadEnd</a></code></td>\n        <td>\n          \n          <p>An event triggered when a route has been lazy loaded.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RouteConfigLoadStart\">RouteConfigLoadStart</a></code></td>\n        <td>\n          \n          <p>An event triggered before lazy loading a route configuration.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RouteReuseStrategy\">RouteReuseStrategy</a></code></td>\n        <td>\n          \n          <p>Provides a way to customize when activated routes get reused.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/Router\">Router</a></code></td>\n        <td>\n          \n          <p>A service that provides navigation among views and URL manipulation capabilities.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RouterEvent\">RouterEvent</a></code></td>\n        <td>\n          \n          <p>Base for events the router goes through, as opposed to events tied to a specific\nroute. Fired one time for any given navigation.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RouterPreloader\">RouterPreloader</a></code></td>\n        <td>\n          \n          <p>The preloader optimistically loads all router configurations to\nmake navigations into lazily-loaded sections of the application faster.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RoutesRecognized\">RoutesRecognized</a></code></td>\n        <td>\n          \n          <p>An event triggered when routes are recognized.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/Scroll\">Scroll</a></code></td>\n        <td>\n          \n          <p>An event triggered by scrolling.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/UrlHandlingStrategy\">UrlHandlingStrategy</a></code></td>\n        <td>\n          \n          <p>Provides a way to migrate AngularJS applications to Angular.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/UrlSegment\">UrlSegment</a></code></td>\n        <td>\n          \n          <p>Represents a single URL segment.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/UrlSegmentGroup\">UrlSegmentGroup</a></code></td>\n        <td>\n          \n          <p>Represents the parsed URL segment group.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/UrlSerializer\">UrlSerializer</a></code></td>\n        <td>\n          \n          <p>Serializes and deserializes a URL string into a URL tree.</p>\n\n        </td>\n      </tr>\n      \n    </tbody></table>\n  </section>\n  \n\n  \n  \n  \n\n  \n  \n  \n  <section class=\"export-list\">\n    <h3 id=\"functions\">Functions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router#functions\"><i class=\"material-icons\">link</i></a></h3>\n    <table class=\"is-full-width list-table\">\n      \n      <tbody><tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/convertToParamMap\">convertToParamMap</a></code></td>\n        <td>\n          \n          <p>Converts a <code><a href=\"api/router/Params\" class=\"code-anchor\">Params</a></code> instance to a <code><a href=\"api/router/ParamMap\" class=\"code-anchor\">ParamMap</a></code>.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/provideRoutes\">provideRoutes</a></code></td>\n        <td>\n          \n          <p>Registers a <a href=\"guide/glossary#provider\">DI provider</a> for a set of routes.</p>\n\n        </td>\n      </tr>\n      \n    </tbody></table>\n  </section>\n  \n\n  \n  \n  \n  <section class=\"export-list\">\n    <h3 id=\"structures\">Structures<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router#structures\"><i class=\"material-icons\">link</i></a></h3>\n    <table class=\"is-full-width list-table\">\n      \n      <tbody><tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ActivatedRoute\">ActivatedRoute</a></code></td>\n        <td>\n          \n          <p>Provides access to information about a route associated with a component\nthat is loaded in an outlet.\nUse to traverse the <code><a href=\"api/router/RouterState\" class=\"code-anchor\">RouterState</a></code> tree and extract information from nodes.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ActivatedRouteSnapshot\">ActivatedRouteSnapshot</a></code></td>\n        <td>\n          \n          <p>Contains the information about a route associated with a component loaded in an\noutlet at a particular moment in time. ActivatedRouteSnapshot can also be used to\ntraverse the router state tree.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/CanActivate\">CanActivate</a></code></td>\n        <td>\n          \n          <p>Interface that a class can implement to be a guard deciding if a route can be activated.\nIf all guards return <code>true</code>, navigation continues. If any guard returns <code>false</code>,\nnavigation is cancelled. If any guard returns a <code><a href=\"api/router/UrlTree\" class=\"code-anchor\">UrlTree</a></code>, the current navigation\nis cancelled and a new navigation begins to the <code><a href=\"api/router/UrlTree\" class=\"code-anchor\">UrlTree</a></code> returned from the guard.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/CanActivateChild\">CanActivateChild</a></code></td>\n        <td>\n          \n          <p>Interface that a class can implement to be a guard deciding if a child route can be activated.\nIf all guards return <code>true</code>, navigation continues. If any guard returns <code>false</code>,\nnavigation is cancelled. If any guard returns a <code><a href=\"api/router/UrlTree\" class=\"code-anchor\">UrlTree</a></code>, current navigation\nis cancelled and a new navigation begins to the <code><a href=\"api/router/UrlTree\" class=\"code-anchor\">UrlTree</a></code> returned from the guard.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/CanDeactivate\">CanDeactivate</a></code></td>\n        <td>\n          \n          <p>Interface that a class can implement to be a guard deciding if a route can be deactivated.\nIf all guards return <code>true</code>, navigation continues. If any guard returns <code>false</code>,\nnavigation is cancelled. If any guard returns a <code><a href=\"api/router/UrlTree\" class=\"code-anchor\">UrlTree</a></code>, current navigation\nis cancelled and a new navigation begins to the <code><a href=\"api/router/UrlTree\" class=\"code-anchor\">UrlTree</a></code> returned from the guard.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/CanLoad\">CanLoad</a></code></td>\n        <td>\n          \n          <p>Interface that a class can implement to be a guard deciding if children can be loaded.\nIf all guards return <code>true</code>, navigation continues. If any guard returns <code>false</code>,\nnavigation is cancelled. If any guard returns a <code><a href=\"api/router/UrlTree\" class=\"code-anchor\">UrlTree</a></code>, current navigation\nis cancelled and a new navigation starts to the <code><a href=\"api/router/UrlTree\" class=\"code-anchor\">UrlTree</a></code> returned from the guard.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ExtraOptions\">ExtraOptions</a></code></td>\n        <td>\n          \n          <p>A set of configuration options for a router module, provided in the\n<code>forRoot()</code> method.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/IsActiveMatchOptions\">IsActiveMatchOptions</a></code></td>\n        <td>\n          \n          <p>A set of options which specify how to determine if a <code><a href=\"api/router/UrlTree\" class=\"code-anchor\">UrlTree</a></code> is active, given the <code><a href=\"api/router/UrlTree\" class=\"code-anchor\">UrlTree</a></code>\nfor the current router state.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/NavigationBehaviorOptions\">NavigationBehaviorOptions</a></code></td>\n        <td>\n          \n          <p>Options that modify the <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> navigation strategy.\nSupply an object containing any of these properties to a <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> navigation function to\ncontrol how the navigation should be handled.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/NavigationExtras\">NavigationExtras</a></code></td>\n        <td>\n          \n          <p>Options that modify the <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> navigation strategy.\nSupply an object containing any of these properties to a <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> navigation function to\ncontrol how the target URL should be constructed or interpreted.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ParamMap\">ParamMap</a></code></td>\n        <td>\n          \n          <p>A map that provides access to the required and optional parameters\nspecific to a route.\nThe map supports retrieving a single value with <code>get()</code>\nor multiple values with <code>getAll()</code>.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/Resolve\">Resolve</a></code></td>\n        <td>\n          \n          <p>Interface that classes can implement to be a data provider.\nA data provider class can be used with the router to resolve data during navigation.\nThe interface defines a <code>resolve()</code> method that is invoked when the navigation starts.\nThe router waits for the data to be resolved before the route is finally activated.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/Route\">Route</a></code></td>\n        <td>\n          \n          <p>A configuration object that defines a single route.\nA set of routes are collected in a <code><a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a></code> array to define a <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> configuration.\nThe router attempts to match segments of a given URL against each route,\nusing the configuration options defined in this object.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RouterOutletContract\">RouterOutletContract</a></code></td>\n        <td>\n          \n          <p>An interface that defines the contract for developing a component outlet for the <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code>.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RouterState\">RouterState</a></code></td>\n        <td>\n          \n          <p>Represents the state of the router as a tree of activated routes.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RouterStateSnapshot\">RouterStateSnapshot</a></code></td>\n        <td>\n          \n          <p>Represents the state of the router at a moment in time.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/UrlCreationOptions\">UrlCreationOptions</a></code></td>\n        <td>\n          \n          <p>Options that modify the <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> URL.\nSupply an object containing any of these properties to a <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> navigation function to\ncontrol how the target URL should be constructed.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/UrlTree\">UrlTree</a></code></td>\n        <td>\n          \n          <p>Represents the parsed URL.</p>\n\n        </td>\n      </tr>\n      \n    </tbody></table>\n  </section>\n  \n\n  \n  \n  \n  <section class=\"export-list\">\n    <h3 id=\"directives\">Directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router#directives\"><i class=\"material-icons\">link</i></a></h3>\n    <table class=\"is-full-width list-table\">\n      \n      <tbody><tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RouterLink\">RouterLink</a></code></td>\n        <td>\n          \n          <p>When applied to an element in a template, makes that element a link\nthat initiates navigation to a route. Navigation opens one or more routed components\nin one or more <code>&#x3C;<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>></code> locations on the page.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RouterLinkActive\">RouterLinkActive</a></code></td>\n        <td>\n          \n          <p>Tracks whether the linked route of an element is currently active, and allows you\nto specify one or more CSS classes to add to the element when the linked route\nis active.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RouterLinkWithHref\">RouterLinkWithHref</a></code></td>\n        <td>\n          \n          <p>Lets you link to specific routes in your app.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RouterOutlet\">RouterOutlet</a></code></td>\n        <td>\n          \n          <p>Acts as a placeholder that Angular dynamically fills based on the current router state.</p>\n\n        </td>\n      </tr>\n      \n    </tbody></table>\n  </section>\n  \n\n  \n  \n  \n\n  \n  \n  \n  <section class=\"export-list\">\n    <h3 id=\"types\">Types<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router#types\"><i class=\"material-icons\">link</i></a></h3>\n    <table class=\"is-full-width list-table\">\n      \n      <tbody><tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/Data\">Data</a></code></td>\n        <td>\n          \n          <p>Represents static data associated with a particular route.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor deprecated-api-item\"><a href=\"api/router/DeprecatedLoadChildren\" class=\"deprecated-api-item\">DeprecatedLoadChildren</a></code></td>\n        <td>\n          <p><strong>Deprecated:</strong> The <code>string</code> form of <code>loadChildren</code> is deprecated in favor of the\n<code><a href=\"api/router/LoadChildrenCallback\" class=\"code-anchor\">LoadChildrenCallback</a></code> function which uses the ES dynamic <code>import()</code> expression.\nThis offers a more natural and standards-based mechanism to dynamically\nload an ES module at runtime.</p>\n\n          <p>A string of the form <code>path/to/file#exportName</code> that acts as a URL for a set of routes to load.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/DetachedRouteHandle\">DetachedRouteHandle</a></code></td>\n        <td>\n          \n          <p>Represents the detached route tree.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/Event\">Event</a></code></td>\n        <td>\n          \n          <p>Router events that allow you to track the lifecycle of the router.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/InitialNavigation\">InitialNavigation</a></code></td>\n        <td>\n          \n          <p>Allowed values in an <code><a href=\"api/router/ExtraOptions\" class=\"code-anchor\">ExtraOptions</a></code> object that configure\nwhen the router performs the initial navigation operation.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/LoadChildren\">LoadChildren</a></code></td>\n        <td>\n          \n          <p>A function that returns a set of routes to load.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/LoadChildrenCallback\">LoadChildrenCallback</a></code></td>\n        <td>\n          \n          <p>A function that is called to resolve a collection of lazy-loaded routes.\nMust be an arrow function of the following form:\n<code>() => import('...').then(mod => mod.MODULE)</code></p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/Navigation\">Navigation</a></code></td>\n        <td>\n          \n          <p>Information about a navigation operation.\nRetrieve the most recent navigation object with the\n<a href=\"api/router/Router#getcurrentnavigation\">Router.getCurrentNavigation() method</a> .</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/PRIMARY_OUTLET\">PRIMARY_OUTLET</a></code></td>\n        <td>\n          \n          <p>The primary routing outlet.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/Params\">Params</a></code></td>\n        <td>\n          \n          <p>A collection of matrix and query URL parameters.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/QueryParamsHandling\">QueryParamsHandling</a></code></td>\n        <td>\n          \n          <p>How to handle query parameters in a router link.\nOne of:</p>\n<ul>\n<li><code>merge</code> : Merge new with current parameters.</li>\n<li><code>preserve</code> : Preserve current parameters.</li>\n</ul>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ROUTER_CONFIGURATION\">ROUTER_CONFIGURATION</a></code></td>\n        <td>\n          \n          <p>A <a href=\"guide/glossary/#di-token\">DI token</a> for the router service.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ROUTER_INITIALIZER\">ROUTER_INITIALIZER</a></code></td>\n        <td>\n          \n          <p>A <a href=\"guide/glossary/#di-token\">DI token</a> for the router initializer that\nis called after the app is bootstrapped.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ROUTES\">ROUTES</a></code></td>\n        <td>\n          \n          <p>The <a href=\"guide/glossary/#di-token\">DI token</a> for a router configuration.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/ResolveData\">ResolveData</a></code></td>\n        <td>\n          \n          <p>Represents the resolved data associated with a particular route.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/Routes\">Routes</a></code></td>\n        <td>\n          \n          <p>Represents a route configuration for the Router service.\nAn array of <code><a href=\"api/router/Route\" class=\"code-anchor\">Route</a></code> objects, used in <code><a href=\"api/router/Router#config\" class=\"code-anchor\">Router.config</a></code> and for nested route configurations\nin <code><a href=\"api/router/Route#children\" class=\"code-anchor\">Route.children</a></code>.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/RunGuardsAndResolvers\">RunGuardsAndResolvers</a></code></td>\n        <td>\n          \n          <p>A policy for when to run guards and resolvers on a route.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/UrlMatchResult\">UrlMatchResult</a></code></td>\n        <td>\n          \n          <p>Represents the result of matching URLs with a custom matching function.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/router/UrlMatcher\">UrlMatcher</a></code></td>\n        <td>\n          \n          <p>A function for matching a route against URLs. Implement a custom URL matcher\nfor <code><a href=\"api/router/Route#matcher\" class=\"code-anchor\">Route.matcher</a></code> when a combination of <code>path</code> and <code>pathMatch</code>\nis not expressive enough. Cannot be used together with <code>path</code> and <code>pathMatch</code>.</p>\n\n        </td>\n      </tr>\n      \n    </tbody></table>\n  </section>\n  \n\n  </div>\n</article>\n\n<!-- links to this doc:\n - api/router/ActivatedRoute\n - api/router/ActivatedRouteSnapshot\n - api/router/ActivationEnd\n - api/router/ActivationStart\n - api/router/BaseRouteReuseStrategy\n - api/router/CanActivate\n - api/router/CanActivateChild\n - api/router/CanDeactivate\n - api/router/CanLoad\n - api/router/ChildActivationEnd\n - api/router/ChildActivationStart\n - api/router/ChildrenOutletContexts\n - api/router/Data\n - api/router/DefaultUrlSerializer\n - api/router/DeprecatedLoadChildren\n - api/router/DetachedRouteHandle\n - api/router/Event\n - api/router/ExtraOptions\n - api/router/GuardsCheckEnd\n - api/router/GuardsCheckStart\n - api/router/InitialNavigation\n - api/router/IsActiveMatchOptions\n - api/router/LoadChildren\n - api/router/LoadChildrenCallback\n - api/router/Navigation\n - api/router/NavigationBehaviorOptions\n - api/router/NavigationCancel\n - api/router/NavigationEnd\n - api/router/NavigationError\n - api/router/NavigationExtras\n - api/router/NavigationStart\n - api/router/NoPreloading\n - api/router/OutletContext\n - api/router/PRIMARY_OUTLET\n - api/router/ParamMap\n - api/router/Params\n - api/router/PreloadAllModules\n - api/router/PreloadingStrategy\n - api/router/QueryParamsHandling\n - api/router/ROUTER_CONFIGURATION\n - api/router/ROUTER_INITIALIZER\n - api/router/ROUTES\n - api/router/Resolve\n - api/router/ResolveData\n - api/router/ResolveEnd\n - api/router/ResolveStart\n - api/router/Route\n - api/router/RouteConfigLoadEnd\n - api/router/RouteConfigLoadStart\n - api/router/RouteReuseStrategy\n - api/router/Router\n - api/router/RouterEvent\n - api/router/RouterLink\n - api/router/RouterLinkActive\n - api/router/RouterLinkWithHref\n - api/router/RouterModule\n - api/router/RouterOutlet\n - api/router/RouterOutletContract\n - api/router/RouterPreloader\n - api/router/RouterState\n - api/router/RouterStateSnapshot\n - api/router/Routes\n - api/router/RoutesRecognized\n - api/router/RunGuardsAndResolvers\n - api/router/Scroll\n - api/router/UrlCreationOptions\n - api/router/UrlHandlingStrategy\n - api/router/UrlMatchResult\n - api/router/UrlMatcher\n - api/router/UrlSegment\n - api/router/UrlSegmentGroup\n - api/router/UrlSerializer\n - api/router/UrlTree\n - api/router/convertToParamMap\n - api/router/provideRoutes\n - api/router/testing\n - api/router/testing/RouterTestingModule\n - api/router/testing/SpyNgModuleFactoryLoader\n - api/router/testing/setupTestingRouter\n - api/router/upgrade\n - api/router/upgrade/RouterUpgradeInitializer\n - api/router/upgrade/locationSyncBootstrapListener\n - api/router/upgrade/setUpLocationSync\n - guide/npm-packages\n - guide/router\n-->\n<!-- links from this doc:\n - /api\n - api/router#angularrouter\n - api/router#classes\n - api/router#directives\n - api/router#entry-points\n - api/router#functions\n - api/router#ngmodules\n - api/router#primary\n - api/router#primary-entry-point-exports\n - api/router#secondary\n - api/router#structures\n - api/router#types\n - api/router/ActivatedRoute\n - api/router/ActivatedRouteSnapshot\n - api/router/ActivationEnd\n - api/router/ActivationStart\n - api/router/BaseRouteReuseStrategy\n - api/router/CanActivate\n - api/router/CanActivateChild\n - api/router/CanDeactivate\n - api/router/CanLoad\n - api/router/ChildActivationEnd\n - api/router/ChildActivationStart\n - api/router/ChildrenOutletContexts\n - api/router/Data\n - api/router/DefaultUrlSerializer\n - api/router/DeprecatedLoadChildren\n - api/router/DetachedRouteHandle\n - api/router/Event\n - api/router/ExtraOptions\n - api/router/GuardsCheckEnd\n - api/router/GuardsCheckStart\n - api/router/InitialNavigation\n - api/router/IsActiveMatchOptions\n - api/router/LoadChildren\n - api/router/LoadChildrenCallback\n - api/router/Navigation\n - api/router/NavigationBehaviorOptions\n - api/router/NavigationCancel\n - api/router/NavigationEnd\n - api/router/NavigationError\n - api/router/NavigationExtras\n - api/router/NavigationStart\n - api/router/NoPreloading\n - api/router/OutletContext\n - api/router/PRIMARY_OUTLET\n - api/router/ParamMap\n - api/router/Params\n - api/router/PreloadAllModules\n - api/router/PreloadingStrategy\n - api/router/QueryParamsHandling\n - api/router/ROUTER_CONFIGURATION\n - api/router/ROUTER_INITIALIZER\n - api/router/ROUTES\n - api/router/Resolve\n - api/router/ResolveData\n - api/router/ResolveEnd\n - api/router/ResolveStart\n - api/router/Route\n - api/router/Route#children\n - api/router/Route#matcher\n - api/router/RouteConfigLoadEnd\n - api/router/RouteConfigLoadStart\n - api/router/RouteReuseStrategy\n - api/router/Router\n - api/router/Router#config\n - api/router/Router#getcurrentnavigation\n - api/router/RouterEvent\n - api/router/RouterLink\n - api/router/RouterLinkActive\n - api/router/RouterLinkWithHref\n - api/router/RouterModule\n - api/router/RouterOutlet\n - api/router/RouterOutletContract\n - api/router/RouterPreloader\n - api/router/RouterState\n - api/router/RouterStateSnapshot\n - api/router/Routes\n - api/router/RoutesRecognized\n - api/router/RunGuardsAndResolvers\n - api/router/Scroll\n - api/router/UrlCreationOptions\n - api/router/UrlHandlingStrategy\n - api/router/UrlMatchResult\n - api/router/UrlMatcher\n - api/router/UrlSegment\n - api/router/UrlSegmentGroup\n - api/router/UrlSerializer\n - api/router/UrlTree\n - api/router/convertToParamMap\n - api/router/provideRoutes\n - api/router/testing\n - api/router/upgrade\n - guide/glossary#provider\n - guide/glossary/#di-token\n - guide/router\n - https://github.com/angular/angular/edit/master/packages/router/PACKAGE.md?message=docs(...)%3A%20describe%20your%20change...\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/router/PACKAGE.md\n-->"
}