From ad51b996a2f7e6fddf34291014d4dc45cbf55c8b Mon Sep 17 00:00:00 2001 From: Judy Bogart Date: Tue, 21 Jul 2020 11:00:09 -0700 Subject: [PATCH] docs: update api reference for router outlet directive (#38166) Incorporate more specific information about multiple outlets and how to target them, with link to tutorial example. PR Close #38166 --- .../router/src/directives/router_outlet.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/router/src/directives/router_outlet.ts b/packages/router/src/directives/router_outlet.ts index 1583acf2b8..904e5e1f76 100644 --- a/packages/router/src/directives/router_outlet.ts +++ b/packages/router/src/directives/router_outlet.ts @@ -27,6 +27,21 @@ import {PRIMARY_OUTLET} from '../shared'; * * ``` * + * Named outlets can be the targets of secondary routes. + * The `Route` object for a secondary route has an `outlet` property to identify the target outlet: + * + * `{path: , component: , outlet: }` + * + * Using named outlets and secondary routes, you can target multiple outlets in + * the same `RouterLink` directive. + * + * The router keeps track of separate branches in a navigation tree for each named outlet and + * generates a representation of that tree in the URL. + * The URL for a secondary route uses the following syntax to specify both the primary and secondary + * routes at the same time: + * + * `http://base-path/primary-route-path(outlet-name:route-path)` + * * A router outlet emits an activate event when a new component is instantiated, * and a deactivate event when a component is destroyed. * @@ -35,6 +50,11 @@ import {PRIMARY_OUTLET} from '../shared'; * (activate)='onActivate($event)' * (deactivate)='onDeactivate($event)'> * ``` + * + * @see [Routing tutorial](guide/router-tutorial-toh#named-outlets "Example of a named + * outlet and secondary route configuration"). + * @see `RouterLink` + * @see `Route` * @ngModule RouterModule * * @publicApi