5 lines
20 KiB
JSON
5 lines
20 KiB
JSON
{
|
|
"id": "api/router/RouterLink",
|
|
"title": "RouterLink",
|
|
"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 { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/router/RouterLink\", \"name\": \"RouterLink\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/router\">@angular/router</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/router/src/directives/router_link.ts?message=docs(router)%3A%20describe%20your%20change...#L19-L243\" 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/src/directives/router_link.ts#L19-L243\" 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=\"routerlink\">RouterLink<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterLink#routerlink\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label directive\">directive</label>\n \n \n \n </header>\n \n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n \n <section class=\"short-description\">\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><<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>></code> locations on the page.</p>\n\n <p><a href=\"api/router/RouterLink#description\">See more...</a></p>\n </section>\n \n \n \n \n\n <h2 id=\"ngmodule\">NgModule<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterLink#ngmodule\"><i class=\"material-icons\">link</i></a></h2>\n<ul class=\"ngmodule-list\">\n\n <li>\n <a href=\"api/router/RouterModule\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">RouterModule</code-example>\n </a>\n </li>\n \n</ul>\n\n\n \n<section class=\"selector-list\">\n <h2 id=\"selectors\">Selectors<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterLink#selectors\"><i class=\"material-icons\">link</i></a></h2>\n \n <ul>\n <li><code><i>:not(a)</i><i>:not(<a href=\"api/router/RouterLinkWithHref\" class=\"code-anchor\">area</a>)</i>[<a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>]</code></li>\n \n </ul>\n \n</section>\n\n\n\n \n\n<section class=\"instance-properties\">\n <h2 id=\"properties\">Properties<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterLink#properties\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table property-table\">\n <thead>\n <tr>\n <th>Property</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"queryParams\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\">queryParams</span>?: <a href=\"api/router/Params\" class=\"code-anchor\">Params</a> | null</code>\n </td>\n <td>\n \n <p>Passed to <a href=\"api/router/Router#createUrlTree\">Router#createUrlTree</a> as part of the\n<code><a href=\"api/router/UrlCreationOptions\" class=\"code-anchor\">UrlCreationOptions</a></code>.</p>\n\n \n <p>See also:</p>\n <ul>\n \n <li><a href=\"api/router/UrlCreationOptions#queryParams\">UrlCreationOptions#queryParams</a>\n</li>\n <li><a href=\"api/router/Router#createUrlTree\">Router#createUrlTree</a>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"fragment\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\">fragment</span>?: string</code>\n </td>\n <td>\n \n <p>Passed to <a href=\"api/router/Router#createUrlTree\">Router#createUrlTree</a> as part of the\n<code><a href=\"api/router/UrlCreationOptions\" class=\"code-anchor\">UrlCreationOptions</a></code>.</p>\n\n \n <p>See also:</p>\n <ul>\n \n <li><a href=\"api/router/UrlCreationOptions#fragment\">UrlCreationOptions#fragment</a>\n</li>\n <li><a href=\"api/router/Router#createUrlTree\">Router#createUrlTree</a>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"queryParamsHandling\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\">queryParamsHandling</span>?: <a href=\"api/router/QueryParamsHandling\" class=\"code-anchor\">QueryParamsHandling</a> | null</code>\n </td>\n <td>\n \n <p>Passed to <a href=\"api/router/Router#createUrlTree\">Router#createUrlTree</a> as part of the\n<code><a href=\"api/router/UrlCreationOptions\" class=\"code-anchor\">UrlCreationOptions</a></code>.</p>\n\n \n <p>See also:</p>\n <ul>\n \n <li><a href=\"api/router/UrlCreationOptions#queryParamsHandling\">UrlCreationOptions#queryParamsHandling</a>\n</li>\n <li><a href=\"api/router/Router#createUrlTree\">Router#createUrlTree</a>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"preserveFragment\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\">preserveFragment</span>: boolean</code>\n </td>\n <td>\n \n <p>Passed to <a href=\"api/router/Router#createUrlTree\">Router#createUrlTree</a> as part of the\n<code><a href=\"api/router/UrlCreationOptions\" class=\"code-anchor\">UrlCreationOptions</a></code>.</p>\n\n \n <p>See also:</p>\n <ul>\n \n <li><a href=\"api/router/UrlCreationOptions#preserveFragment\">UrlCreationOptions#preserveFragment</a>\n</li>\n <li><a href=\"api/router/Router#createUrlTree\">Router#createUrlTree</a>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"skipLocationChange\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\">skipLocationChange</span>: boolean</code>\n </td>\n <td>\n \n <p>Passed to <a href=\"api/router/Router#navigateByUrl\">Router#navigateByUrl</a> as part of the\n<code><a href=\"api/router/NavigationBehaviorOptions\" class=\"code-anchor\">NavigationBehaviorOptions</a></code>.</p>\n\n \n <p>See also:</p>\n <ul>\n \n <li><a href=\"api/router/NavigationBehaviorOptions#skipLocationChange\">NavigationBehaviorOptions#skipLocationChange</a>\n</li>\n <li><a href=\"api/router/Router#navigateByUrl\">Router#navigateByUrl</a>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"replaceUrl\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\">replaceUrl</span>: boolean</code>\n </td>\n <td>\n \n <p>Passed to <a href=\"api/router/Router#navigateByUrl\">Router#navigateByUrl</a> as part of the\n<code><a href=\"api/router/NavigationBehaviorOptions\" class=\"code-anchor\">NavigationBehaviorOptions</a></code>.</p>\n\n \n <p>See also:</p>\n <ul>\n \n <li><a href=\"api/router/NavigationBehaviorOptions#replaceUrl\">NavigationBehaviorOptions#replaceUrl</a>\n</li>\n <li><a href=\"api/router/Router#navigateByUrl\">Router#navigateByUrl</a>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"state\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\"><a href=\"api/animations/state\" class=\"code-anchor\">state</a></span>?: {\n [k: string]: any;\n}</code>\n </td>\n <td>\n \n <p>Passed to <a href=\"api/router/Router#navigateByUrl\">Router#navigateByUrl</a> as part of the\n<code><a href=\"api/router/NavigationBehaviorOptions\" class=\"code-anchor\">NavigationBehaviorOptions</a></code>.</p>\n\n \n <p>See also:</p>\n <ul>\n \n <li><a href=\"api/router/NavigationBehaviorOptions#state\">NavigationBehaviorOptions#state</a>\n</li>\n <li><a href=\"api/router/Router#navigateByUrl\">Router#navigateByUrl</a>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"relativeTo\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\">relativeTo</span>?: <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a> | null</code>\n </td>\n <td>\n \n <p>Passed to <a href=\"api/router/Router#createUrlTree\">Router#createUrlTree</a> as part of the\n<code><a href=\"api/router/UrlCreationOptions\" class=\"code-anchor\">UrlCreationOptions</a></code>.\nSpecify a value here when you do not want to use the default value\nfor <code><a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a></code>, which is the current activated route.\nNote that a value of <code>undefined</code> here will use the <code><a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a></code> default.</p>\n\n \n <p>See also:</p>\n <ul>\n \n <li><a href=\"api/router/UrlCreationOptions#relativeTo\">UrlCreationOptions#relativeTo</a>\n</li>\n <li><a href=\"api/router/Router#createUrlTree\">Router#createUrlTree</a>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"routerLink\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\"><a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a></span>: string | any[]</code>\n </td>\n <td><span class=\"write-only-property\">Write-Only</span>\n \n <p>Commands to pass to <a href=\"api/router/Router#createUrlTree\">Router#createUrlTree</a>.</p>\n<ul>\n<li><strong>array</strong>: commands to pass to <a href=\"api/router/Router#createUrlTree\">Router#createUrlTree</a>.</li>\n<li><strong>string</strong>: shorthand for array of commands with just the string, i.e. <code>['/route']</code></li>\n<li><strong>null|undefined</strong>: shorthand for an empty array of commands, i.e. <code>[]</code></li>\n</ul>\n\n \n <p>See also:</p>\n <ul>\n \n <li><a href=\"api/router/Router#createUrlTree\">Router#createUrlTree</a>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"urlTree\"></a>\n <code class=\"\"><span class=\"member-name\">urlTree</span>: <a href=\"api/router/UrlTree\" class=\"code-anchor\">UrlTree</a></code>\n </td>\n <td><span class=\"read-only-property\">Read-Only</span>\n \n \n \n </td>\n </tr>\n \n </tbody>\n </table>\n</section>\n\n\n\n \n\n\n \n <section class=\"description\">\n <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterLink#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>Given a route configuration <code>[{ path: 'user/:name', component: UserCmp }]</code>,\nthe following creates a static link to the route:\n<code><a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/user/bob\">link to user component</a></code></p>\n<p>You can use dynamic values to generate the link.\nFor a dynamic link, pass an array of path segments,\nfollowed by the params for each segment.\nFor example, <code>['/team', teamId, 'user', userName, {details: true}]</code>\ngenerates a link to <code>/team/11/user/bob;details=true</code>.</p>\n<p>Multiple static segments can be merged into one term and combined with dynamic segements.\nFor example, <code>['/team/11/user', userName, {details: true}]</code></p>\n<p>The input that you provide to the link is treated as a delta to the current URL.\nFor instance, suppose the current URL is <code>/user/(box//aux:team)</code>.\nThe link <code><a [<a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>]=\"['/user/jim']\">Jim</a></code> creates the URL\n<code>/user/(jim//aux:team)</code>.\nSee <a href=\"api/router/Router#createUrlTree\">createUrlTree</a> for more information.</p>\n\n <p>You can use absolute or relative paths in a link, set query parameters,\ncontrol how parameters are handled, and keep a history of navigation states.</p>\n<h3 id=\"relative-link-paths\">Relative link paths<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterLink#relative-link-paths\"><i class=\"material-icons\">link</i></a></h3>\n<p>The first segment name can be prepended with <code>/</code>, <code>./</code>, or <code>../</code>.</p>\n<ul>\n<li>If the first segment begins with <code>/</code>, the router looks up the route from the root of the\napp.</li>\n<li>If the first segment begins with <code>./</code>, or doesn't begin with a slash, the router\nlooks in the children of the current activated route.</li>\n<li>If the first segment begins with <code>../</code>, the router goes up one level in the route tree.</li>\n</ul>\n<h3 id=\"setting-and-handling-query-params-and-fragments\">Setting and handling query params and fragments<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterLink#setting-and-handling-query-params-and-fragments\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following link adds a query parameter and a fragment to the generated URL:</p>\n<code-example>\n<a [<a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>]=\"['/user/bob']\" [queryParams]=\"{debug: true}\" fragment=\"education\">\n link to user component\n</a>\n</code-example>\n<p>By default, the directive constructs the new URL using the given query parameters.\nThe example generates the link: <code>/user/bob?debug=true#education</code>.</p>\n<p>You can instruct the directive to handle query parameters differently\nby specifying the <code>queryParamsHandling</code> option in the link.\nAllowed values are:</p>\n<ul>\n<li><code>'merge'</code>: Merge the given <code>queryParams</code> into the current query params.</li>\n<li><code>'preserve'</code>: Preserve the current query params.</li>\n</ul>\n<p>For example:</p>\n<code-example>\n<a [<a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>]=\"['/user/bob']\" [queryParams]=\"{debug: true}\" queryParamsHandling=\"merge\">\n link to user component\n</a>\n</code-example>\n<p>See <a href=\"api/router/UrlCreationOptions#queryParamsHandling\">UrlCreationOptions#queryParamsHandling</a>.</p>\n<h3 id=\"preserving-navigation-history\">Preserving navigation history<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterLink#preserving-navigation-history\"><i class=\"material-icons\">link</i></a></h3>\n<p>You can provide a <code><a href=\"api/animations/state\" class=\"code-anchor\">state</a></code> value to be persisted to the browser's\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/History#Properties\"><code>History.state</code> property</a>.\nFor example:</p>\n<code-example>\n<a [<a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>]=\"['/user/bob']\" [<a href=\"api/animations/state\" class=\"code-anchor\">state</a>]=\"{tracingId: 123}\">\n link to user component\n</a>\n</code-example>\n<p>Use <a href=\"api/router/Router#getCurrentNavigation\">Router#getCurrentNavigation</a> to retrieve a saved\nnavigation-state value. For example, to capture the <code>tracingId</code> during the <code><a href=\"api/router/NavigationStart\" class=\"code-anchor\">NavigationStart</a></code>\nevent:</p>\n<code-example>\n// Get <a href=\"api/router/NavigationStart\" class=\"code-anchor\">NavigationStart</a> events\nrouter.events.pipe(filter(e => e instanceof <a href=\"api/router/NavigationStart\" class=\"code-anchor\">NavigationStart</a>)).subscribe(e => {\n const navigation = router.getCurrentNavigation();\n tracingService.trace({id: navigation.extras.state.tracingId});\n});\n</code-example>\n\n </section>\n \n\n \n\n \n\n \n\n \n \n \n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/core/OnChanges\n - api/router\n - api/router/ExtraOptions\n - api/router/QueryParamsHandling\n - api/router/RouterLinkActive\n - api/router/RouterLinkWithHref\n - api/router/RouterModule\n - api/router/RouterOutlet\n - guide/ajs-quick-reference\n - guide/cheatsheet\n - guide/frequent-ngmodules\n - guide/lazy-loading-ngmodules\n - guide/module-types\n - guide/router\n - guide/router-tutorial\n - guide/router-tutorial-toh\n - guide/singleton-services\n - guide/testing-components-scenarios\n - guide/universal\n - guide/updating-to-version-11\n - guide/upgrade\n - start/start-data\n - start/start-forms\n - start/start-routing\n - tutorial/toh-pt5\n - tutorial/toh-pt6\n-->\n<!-- links from this doc:\n - /api\n - api/animations/state\n - api/core/Input\n - api/router\n - api/router/ActivatedRoute\n - api/router/NavigationBehaviorOptions\n - api/router/NavigationBehaviorOptions#replaceUrl\n - api/router/NavigationBehaviorOptions#skipLocationChange\n - api/router/NavigationBehaviorOptions#state\n - api/router/NavigationStart\n - api/router/Params\n - api/router/QueryParamsHandling\n - api/router/Router#createUrlTree\n - api/router/Router#getCurrentNavigation\n - api/router/Router#navigateByUrl\n - api/router/RouterLink#description\n - api/router/RouterLink#ngmodule\n - api/router/RouterLink#preserving-navigation-history\n - api/router/RouterLink#properties\n - api/router/RouterLink#relative-link-paths\n - api/router/RouterLink#routerlink\n - api/router/RouterLink#selectors\n - api/router/RouterLink#setting-and-handling-query-params-and-fragments\n - api/router/RouterLinkWithHref\n - api/router/RouterModule\n - api/router/RouterOutlet\n - api/router/UrlCreationOptions\n - api/router/UrlCreationOptions#fragment\n - api/router/UrlCreationOptions#preserveFragment\n - api/router/UrlCreationOptions#queryParams\n - api/router/UrlCreationOptions#queryParamsHandling\n - api/router/UrlCreationOptions#relativeTo\n - api/router/UrlTree\n - https://developer.mozilla.org/en-US/docs/Web/API/History#Properties\n - https://github.com/angular/angular/edit/master/packages/router/src/directives/router_link.ts?message=docs(router)%3A%20describe%20your%20change...#L19-L243\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/router/src/directives/router_link.ts#L19-L243\n-->"
|
|
} |