5 lines
10 KiB
JSON
5 lines
10 KiB
JSON
{
|
|
"id": "api/router/UrlCreationOptions",
|
|
"title": "UrlCreationOptions",
|
|
"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/UrlCreationOptions\", \"name\": \"UrlCreationOptions\" } }\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/router.ts?message=docs(router)%3A%20describe%20your%20change...#L34-L143\" 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/router.ts#L34-L143\" 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=\"urlcreationoptions\">UrlCreationOptions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/UrlCreationOptions#urlcreationoptions\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label interface\">interface</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>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 \n </section>\n \n \n <section class=\"interface-overview\">\n<code-example language=\"ts\" hidecopy=\"true\">\ninterface <a href=\"api/router/UrlCreationOptions\" class=\"code-anchor\">UrlCreationOptions</a> {\n <a class=\"code-anchor\" href=\"api/router/UrlCreationOptions#relativeTo\"><span class=\"member-name\">relativeTo</span>?: ActivatedRoute | null</a>\n <a class=\"code-anchor\" href=\"api/router/UrlCreationOptions#queryParams\"><span class=\"member-name\">queryParams</span>?: Params | null</a>\n <a class=\"code-anchor\" href=\"api/router/UrlCreationOptions#fragment\"><span class=\"member-name\">fragment</span>?: string</a>\n <a class=\"code-anchor\" href=\"api/router/UrlCreationOptions#queryParamsHandling\"><span class=\"member-name\">queryParamsHandling</span>?: QueryParamsHandling | null</a>\n <a class=\"code-anchor\" href=\"api/router/UrlCreationOptions#preserveFragment\"><span class=\"member-name\">preserveFragment</span>?: boolean</a>\n}\n</code-example>\n\n \n \n <div class=\"descendants interface\">\n <h2 id=\"child-interfaces\">Child interfaces<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/UrlCreationOptions#child-interfaces\"><i class=\"material-icons\">link</i></a></h2>\n \n\n<ul>\n \n <li>\n <code><a href=\"api/router/NavigationExtras\" class=\"code-anchor\">NavigationExtras</a></code>\n \n\n\n </li>\n \n</ul>\n\n\n </div>\n \n\n\n \n \n\n</section>\n\n \n<section class=\"see-also\">\n <h2 id=\"see-also\">See also<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/UrlCreationOptions#see-also\"><i class=\"material-icons\">link</i></a></h2>\n <ul>\n \n <li><p><a href=\"api/router/Router#navigate\">Router.navigate() method</a></p>\n</li>\n <li><p><a href=\"api/router/Router#createurltree\">Router.createUrlTree() method</a></p>\n</li>\n <li><p><a href=\"guide/router\">Routing and Navigation guide</a></p>\n</li>\n </ul>\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/UrlCreationOptions#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=\"relativeTo\"></a>\n <code class=\"\"><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>Specifies a root URI to use for relative navigation.</p>\n\n <p>For example, consider the following route configuration where the parent route\nhas two children.</p>\n<code-example>\n[{\n path: 'parent',\n component: ParentComponent,\n children: [{\n path: 'list',\n component: ListComponent\n },{\n path: 'child',\n component: ChildComponent\n }]\n}]\n</code-example>\n<p>The following <code>go()</code> function navigates to the <code>list</code> route by\ninterpreting the destination URI as relative to the activated <code>child</code> route</p>\n<code-example>\n @<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({...})\n class ChildComponent {\n constructor(private router: <a href=\"api/router/Router\" class=\"code-anchor\">Router</a>, private route: <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a>) {}\n\n go() {\n this.router.navigate(['../list'], { relativeTo: this.route });\n }\n }\n</code-example>\n<p>A value of <code>null</code> or <code>undefined</code> indicates that the navigation commands should be applied\nrelative to the root.</p>\n\n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"queryParams\"></a>\n <code class=\"\"><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>Sets query parameters to the URL.</p>\n\n <code-example>\n// Navigate to /results?page=1\nthis.router.navigate(['/results'], { queryParams: { page: 1 } });\n</code-example>\n\n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"fragment\"></a>\n <code class=\"\"><span class=\"member-name\">fragment</span>?: string</code>\n </td>\n <td>\n \n <p>Sets the hash fragment for the URL.</p>\n\n <code-example>\n// Navigate to /results#top\nthis.router.navigate(['/results'], { fragment: 'top' });\n</code-example>\n\n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"queryParamsHandling\"></a>\n <code class=\"\"><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>How to handle query parameters in the router link for the next navigation.\nOne of:</p>\n<ul>\n<li><code>preserve</code> : Preserve current parameters.</li>\n<li><code>merge</code> : Merge new with current parameters.</li>\n</ul>\n\n <p>The \"preserve\" option discards any new query params:</p>\n<code-example>\n// from /view1?page=1 to/view2?page=1\nthis.router.navigate(['/view2'], { queryParams: { page: 2 }, queryParamsHandling: \"preserve\"\n});\n</code-example>\n<p>The \"merge\" option appends new query params to the params from the current URL:</p>\n<code-example>\n// from /view1?page=1 to/view2?page=1&otherKey=2\nthis.router.navigate(['/view2'], { queryParams: { otherKey: 2 }, queryParamsHandling: \"merge\"\n});\n</code-example>\n<p>In case of a key collision between current parameters and those in the <code>queryParams</code> object,\nthe new value is used.</p>\n\n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"preserveFragment\"></a>\n <code class=\"\"><span class=\"member-name\">preserveFragment</span>?: boolean</code>\n </td>\n <td>\n \n <p>When true, preserves the URL fragment for the next navigation</p>\n\n <code-example>\n// Preserve fragment from /results#top to /view#top\nthis.router.navigate(['/view'], { preserveFragment: true });\n</code-example>\n\n </td>\n </tr>\n \n </tbody>\n </table>\n</section>\n \n\n\n \n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/router\n - api/router/NavigationExtras\n - api/router/QueryParamsHandling\n - api/router/Router\n - api/router/RouterLink\n - api/router/RouterLinkWithHref\n - guide/deprecations\n-->\n<!-- links from this doc:\n - /api\n - api/core/Component\n - api/router\n - api/router/ActivatedRoute\n - api/router/NavigationExtras\n - api/router/Params\n - api/router/QueryParamsHandling\n - api/router/Router\n - api/router/Router#createurltree\n - api/router/Router#navigate\n - api/router/UrlCreationOptions#child-interfaces\n - api/router/UrlCreationOptions#fragment\n - api/router/UrlCreationOptions#preserveFragment\n - api/router/UrlCreationOptions#properties\n - api/router/UrlCreationOptions#queryParams\n - api/router/UrlCreationOptions#queryParamsHandling\n - api/router/UrlCreationOptions#relativeTo\n - api/router/UrlCreationOptions#see-also\n - api/router/UrlCreationOptions#urlcreationoptions\n - guide/router\n - https://github.com/angular/angular/edit/master/packages/router/src/router.ts?message=docs(router)%3A%20describe%20your%20change...#L34-L143\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/router/src/router.ts#L34-L143\n-->"
|
|
} |