5 lines
99 KiB
JSON
5 lines
99 KiB
JSON
{
|
|
"id": "api/router/RouterOutlet",
|
|
"title": "RouterOutlet",
|
|
"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/RouterOutlet\", \"name\": \"RouterOutlet\" } }\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_outlet.ts?message=docs(router)%3A%20describe%20your%20change...#L76-L236\" 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_outlet.ts#L76-L236\" 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=\"routeroutlet\">RouterOutlet<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterOutlet#routeroutlet\"><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>Acts as a placeholder that Angular dynamically fills based on the current router state.</p>\n\n <p><a href=\"api/router/RouterOutlet#description\">See more...</a></p>\n </section>\n \n \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/RouterOutlet#see-also\"><i class=\"material-icons\">link</i></a></h2>\n <ul>\n \n <li><p><a href=\"guide/router-tutorial-toh#named-outlets\" title=\"Example of a named\noutlet and secondary route configuration\">Routing tutorial</a>.</p>\n</li>\n <li><p><code><a href=\"api/router/RouterLink\" class=\"code-anchor\">RouterLink</a></code></p>\n</li>\n <li><p><code><a href=\"api/router/Route\" class=\"code-anchor\">Route</a></code></p>\n</li>\n </ul>\n</section>\n\n\n <h2 id=\"ngmodule\">NgModule<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterOutlet#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/RouterOutlet#selectors\"><i class=\"material-icons\">link</i></a></h2>\n \n <ul>\n <li><code><a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</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/RouterOutlet#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=\"activateEvents\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>('activate')</span><br><span class=\"member-name\">activateEvents</span>: <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a><any></code>\n </td>\n <td>\n \n \n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"deactivateEvents\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>('deactivate')</span><br><span class=\"member-name\">deactivateEvents</span>: <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a><any></code>\n </td>\n <td>\n \n \n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"isActivated\"></a>\n <code class=\"\"><span class=\"member-name\">isActivated</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=\"component\"></a>\n <code class=\"\"><span class=\"member-name\">component</span>: Object</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=\"activatedRoute\"></a>\n <code class=\"\"><span class=\"member-name\">activatedRoute</span>: <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a></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=\"activatedRouteData\"></a>\n <code class=\"\"><span class=\"member-name\">activatedRouteData</span>: <a href=\"api/router/Data\" class=\"code-anchor\">Data</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<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/RouterOutlet#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>outlet</code></td>\n <td><code>#myTemplateVar=\"outlet\"</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/RouterOutlet#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>Each outlet can have a unique name, determined by the optional <code>name</code> attribute.\nThe name cannot be set or changed dynamically. If not set, default value is \"primary\".</p>\n<code-example>\n<<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>></<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>>\n<<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a> name='left'></<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>>\n<<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a> name='right'></<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>>\n</code-example>\n<p>Named outlets can be the targets of secondary routes.\nThe <code><a href=\"api/router/Route\" class=\"code-anchor\">Route</a></code> object for a secondary route has an <code>outlet</code> property to identify the target outlet:</p>\n<p><code>{path: <base-path>, component: <component>, outlet: <target_outlet_name>}</code></p>\n<p>Using named outlets and secondary routes, you can target multiple outlets in\nthe same <code><a href=\"api/router/RouterLink\" class=\"code-anchor\">RouterLink</a></code> directive.</p>\n<p>The router keeps track of separate branches in a navigation tree for each named outlet and\ngenerates a representation of that tree in the URL.\nThe URL for a secondary route uses the following syntax to specify both the primary and secondary\nroutes at the same time:</p>\n<p><code>http://base-path/primary-route-path(outlet-name:route-path)</code></p>\n<p>A router outlet emits an activate event when a new component is instantiated,\nand a deactivate event when a component is destroyed.</p>\n<code-example>\n<<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>\n (activate)='onActivate($event)'\n (deactivate)='onDeactivate($event)'></<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>>\n</code-example>\n\n \n </section>\n \n\n \n\n \n\n \n\n<section class=\"instance-methods\">\n <h2 id=\"methods\">Methods<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterOutlet#methods\"><i class=\"material-icons\">link</i></a></h2>\n \n <a id=\"detach\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"detach\">\n detach()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterOutlet#detach\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/router/src/directives/router_outlet.ts?message=docs(router)%3A%20describe%20your%20change...#L187-L198\" 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_outlet.ts#L187-L198\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Called when the <code><a href=\"api/router/RouteReuseStrategy\" class=\"code-anchor\">RouteReuseStrategy</a></code> instructs to detach the subtree</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">detach</span>(): <a href=\"api/core/ComponentRef\" class=\"code-anchor\">ComponentRef</a><any></code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters\">Parameters</h6>\n <p>There are no parameters.</p>\n\n \n <h6 class=\"no-anchor\" id=\"returns\">Returns</h6>\n <p><code><a href=\"api/core/ComponentRef\" class=\"code-anchor\">ComponentRef</a><any></code></p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n <a id=\"attach\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"attach\">\n attach()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterOutlet#attach\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/router/src/directives/router_outlet.ts?message=docs(router)%3A%20describe%20your%20change...#L199-L207\" 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_outlet.ts#L199-L207\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Called when the <code><a href=\"api/router/RouteReuseStrategy\" class=\"code-anchor\">RouteReuseStrategy</a></code> instructs to re-attach a previously detached subtree</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">attach</span>(ref: <a href=\"api/core/ComponentRef\" class=\"code-anchor\">ComponentRef</a><any>, activatedRoute: <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a>)</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-1\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>ref</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/core/ComponentRef\" class=\"code-anchor\">ComponentRef</a><any></any></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>activatedRoute</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n <a id=\"deactivate\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"deactivate\">\n deactivate()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterOutlet#deactivate\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/router/src/directives/router_outlet.ts?message=docs(router)%3A%20describe%20your%20change...#L208-L217\" 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_outlet.ts#L208-L217\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n \n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">deactivate</span>(): void</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-2\">Parameters</h6>\n <p>There are no parameters.</p>\n\n \n <h6 class=\"no-anchor\" id=\"returns-1\">Returns</h6>\n <p><code>void</code></p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n <a id=\"activateWith\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"activatewith\">\n activateWith()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/RouterOutlet#activatewith\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/router/src/directives/router_outlet.ts?message=docs(router)%3A%20describe%20your%20change...#L218-L235\" 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_outlet.ts#L218-L235\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n \n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">activateWith</span>(activatedRoute: <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a>, resolver: <a href=\"api/core/ComponentFactoryResolver\" class=\"code-anchor\">ComponentFactoryResolver</a>)</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-3\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>activatedRoute</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>resolver</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/core/ComponentFactoryResolver\" class=\"code-anchor\">ComponentFactoryResolver</a></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n</section>\n\n \n \n \n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/core/OnDestroy\n - api/core/OnInit\n - api/router\n - api/router/ChildrenOutletContexts\n - api/router/OutletContext\n - api/router/Route\n - api/router/RouterLink\n - api/router/RouterModule\n - api/router/RouterOutletContract\n - guide/app-shell\n - guide/attribute-binding\n - guide/cheatsheet\n - guide/glossary\n - guide/lazy-loading-ngmodules\n - guide/module-types\n - guide/ngmodule-api\n - guide/ngmodule-faq\n - guide/route-animations\n - guide/router\n - guide/router-tutorial\n - guide/router-tutorial-toh\n - guide/singleton-services\n - guide/testing-components-scenarios\n - guide/upgrade\n - tutorial/toh-pt5\n-->\n<!-- links from this doc:\n - /api\n - api/core/ComponentFactoryResolver\n - api/core/ComponentRef\n - api/core/EventEmitter\n - api/core/Output\n - api/router\n - api/router/ActivatedRoute\n - api/router/Data\n - api/router/Route\n - api/router/RouteReuseStrategy\n - api/router/RouterLink\n - api/router/RouterModule\n - api/router/RouterOutlet#activatewith\n - api/router/RouterOutlet#attach\n - api/router/RouterOutlet#deactivate\n - api/router/RouterOutlet#description\n - api/router/RouterOutlet#detach\n - api/router/RouterOutlet#methods\n - api/router/RouterOutlet#ngmodule\n - api/router/RouterOutlet#properties\n - api/router/RouterOutlet#routeroutlet\n - api/router/RouterOutlet#see-also\n - api/router/RouterOutlet#selectors\n - api/router/RouterOutlet#template-variable-references\n - guide/router-tutorial-toh#named-outlets\n - https://github.com/angular/angular/edit/master/packages/router/src/directives/router_outlet.ts?message=docs(router)%3A%20describe%20your%20change...#L187-L198\n - https://github.com/angular/angular/edit/master/packages/router/src/directives/router_outlet.ts?message=docs(router)%3A%20describe%20your%20change...#L199-L207\n - https://github.com/angular/angular/edit/master/packages/router/src/directives/router_outlet.ts?message=docs(router)%3A%20describe%20your%20change...#L208-L217\n - https://github.com/angular/angular/edit/master/packages/router/src/directives/router_outlet.ts?message=docs(router)%3A%20describe%20your%20change...#L218-L235\n - https://github.com/angular/angular/edit/master/packages/router/src/directives/router_outlet.ts?message=docs(router)%3A%20describe%20your%20change...#L76-L236\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/router/src/directives/router_outlet.ts#L187-L198\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/router/src/directives/router_outlet.ts#L199-L207\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/router/src/directives/router_outlet.ts#L208-L217\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/router/src/directives/router_outlet.ts#L218-L235\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/router/src/directives/router_outlet.ts#L76-L236\n-->"
|
|
} |