5 lines
11 KiB
JSON
5 lines
11 KiB
JSON
{
|
|
"id": "api/router/RouterLinkActive",
|
|
"title": "RouterLinkActive",
|
|
"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/RouterLinkActive\", \"name\": \"RouterLinkActive\" } }\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_active.ts?message=docs(router)%3A%20describe%20your%20change...#L18-L184\" 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_active.ts#L18-L184\" 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=\"routerlinkactive\">RouterLinkActive<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterLinkActive#routerlinkactive\"><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>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 <p><a href=\"api/router/RouterLinkActive#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/RouterLinkActive#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/RouterLinkActive#selectors\"><i class=\"material-icons\">link</i></a></h2>\n \n <ul>\n <li><code>[<a href=\"api/router/RouterLinkActive\" class=\"code-anchor\">routerLinkActive</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/RouterLinkActive#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=\"links\"></a>\n <code class=\"\"><span class=\"member-name\">links</span>: <a href=\"api/core/QueryList\" class=\"code-anchor\">QueryList</a><<a href=\"api/router/RouterLink\" class=\"code-anchor\">RouterLink</a>></code>\n </td>\n <td>\n \n \n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"linksWithHrefs\"></a>\n <code class=\"\"><span class=\"member-name\">linksWithHrefs</span>: <a href=\"api/core/QueryList\" class=\"code-anchor\">QueryList</a><<a href=\"api/router/RouterLinkWithHref\" class=\"code-anchor\">RouterLinkWithHref</a>></code>\n </td>\n <td>\n \n \n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"isActive\"></a>\n <code class=\"\"><span class=\"member-name\">isActive</span>: boolean</code>\n </td>\n <td><span class=\"read-only-property\">Read-Only</span>\n \n \n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"routerLinkActiveOptions\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\">routerLinkActiveOptions</span>: {\n exact: boolean;\n} | <a href=\"api/router/IsActiveMatchOptions\" class=\"code-anchor\">IsActiveMatchOptions</a></code>\n </td>\n <td>\n \n <p>Options to configure how to determine if the router link is active.</p>\n\n <p>These options are passed to the <code><a href=\"api/router/Router#isActive\" class=\"code-anchor\">Router.isActive()</a></code> function.</p>\n\n <p>See also:</p>\n <ul>\n \n <li><p>Router.isActive</p>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"routerLinkActive\"></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/RouterLinkActive\" class=\"code-anchor\">routerLinkActive</a></span>: string | string[]</code>\n </td>\n <td><span class=\"write-only-property\">Write-Only</span>\n \n \n \n </td>\n </tr>\n \n </tbody>\n </table>\n</section>\n\n\n\n \n<section class=\"export-as\">\n <h2 id=\"template-variable-references\">Template variable references<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterLinkActive#template-variable-references\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table export-as-table\">\n <thead>\n <tr>\n <th>Identifier</th>\n <th>Usage</th>\n </tr>\n </thead>\n <tbody>\n <tr class=\"export-as\">\n <td><code><a href=\"api/router/RouterLinkActive\" class=\"code-anchor\">routerLinkActive</a></code></td>\n <td><code>#myTemplateVar=\"<a href=\"api/router/RouterLinkActive\" class=\"code-anchor\">routerLinkActive</a>\"</code></td>\n </tr>\n \n </tbody>\n </table>\n</section>\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/RouterLinkActive#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>Use this directive to create a visual distinction for elements associated with an active route.\nFor example, the following code highlights the word \"Bob\" when the router\nactivates the associated route:</p>\n<code-example>\n<a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/user/bob\" <a href=\"api/router/RouterLinkActive\" class=\"code-anchor\">routerLinkActive</a>=\"active-link\">Bob</a>\n</code-example>\n<p>Whenever the URL is either '/user' or '/user/bob', the \"active-link\" class is\nadded to the anchor tag. If the URL changes, the class is removed.</p>\n<p>You can set more than one class using a space-separated string or an array.\nFor example:</p>\n<code-example>\n<a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/user/bob\" <a href=\"api/router/RouterLinkActive\" class=\"code-anchor\">routerLinkActive</a>=\"class1 class2\">Bob</a>\n<a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/user/bob\" [<a href=\"api/router/RouterLinkActive\" class=\"code-anchor\">routerLinkActive</a>]=\"['class1', 'class2']\">Bob</a>\n</code-example>\n<p>To add the classes only when the URL matches the link exactly, add the option <code>exact: true</code>:</p>\n<code-example>\n<a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/user/bob\" <a href=\"api/router/RouterLinkActive\" class=\"code-anchor\">routerLinkActive</a>=\"active-link\" [routerLinkActiveOptions]=\"{exact:\ntrue}\">Bob</a>\n</code-example>\n<p>To directly check the <code>isActive</code> status of the link, assign the <code><a href=\"api/router/RouterLinkActive\" class=\"code-anchor\">RouterLinkActive</a></code>\ninstance to a template variable.\nFor example, the following checks the status without assigning any CSS classes:</p>\n<code-example>\n<a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/user/bob\" <a href=\"api/router/RouterLinkActive\" class=\"code-anchor\">routerLinkActive</a> #rla=\"<a href=\"api/router/RouterLinkActive\" class=\"code-anchor\">routerLinkActive</a>\">\n Bob {{ rla.isActive ? '(already open)' : ''}}\n</a>\n</code-example>\n<p>You can apply the <code><a href=\"api/router/RouterLinkActive\" class=\"code-anchor\">RouterLinkActive</a></code> directive to an ancestor of linked elements.\nFor example, the following sets the active-link class on the <code><div></code> parent tag\nwhen the URL is either '/user/jim' or '/user/bob'.</p>\n<code-example>\n<div <a href=\"api/router/RouterLinkActive\" class=\"code-anchor\">routerLinkActive</a>=\"active-link\" [routerLinkActiveOptions]=\"{exact: true}\">\n <a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/user/jim\">Jim</a>\n <a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/user/bob\">Bob</a>\n</div>\n</code-example>\n\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/AfterContentInit\n - api/core/OnChanges\n - api/core/OnDestroy\n - api/router\n - api/router/RouterModule\n - guide/router\n - guide/router-tutorial\n - guide/router-tutorial-toh\n-->\n<!-- links from this doc:\n - /api\n - api/core/Input\n - api/core/QueryList\n - api/router\n - api/router/IsActiveMatchOptions\n - api/router/Router#isActive\n - api/router/RouterLink\n - api/router/RouterLinkActive#description\n - api/router/RouterLinkActive#ngmodule\n - api/router/RouterLinkActive#properties\n - api/router/RouterLinkActive#routerlinkactive\n - api/router/RouterLinkActive#selectors\n - api/router/RouterLinkActive#template-variable-references\n - api/router/RouterLinkWithHref\n - api/router/RouterModule\n - https://github.com/angular/angular/edit/master/packages/router/src/directives/router_link_active.ts?message=docs(router)%3A%20describe%20your%20change...#L18-L184\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/router/src/directives/router_link_active.ts#L18-L184\n-->"
|
|
} |