{"id":59889,"date":"2018-05-03T15:57:39","date_gmt":"2018-05-03T10:27:39","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59889"},"modified":"2024-04-12T14:20:49","modified_gmt":"2024-04-12T08:50:49","slug":"angular-router-outlet","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-router-outlet\/","title":{"rendered":"Angular Router Outlet"},"content":{"rendered":"

Angular Router Outlet<\/h1>\n

Angular Router has Angular routes, which is an array of route configurations. Each Angular router has the Angular routes, which have the following properties:<\/p>\n

path is a string that uses the route matcher DSL.
\npathMatch is a string that specifies the matching strategy.
\nmatcher defines a custom strategy for path matching and supersedes path and pathMatch.
\ncomponent is a component type.
\nredirectTo is the url fragment which will replace the current matched segment.
\noutlet is the name of the outlet the component should be placed into.
\ncanActivate is an array of DI tokens used to look up CanActivate handlers.
\ncanActivateChild is an array of DI tokens used to look up CanActivateChild handlers.
\ncanDeactivate is an array of DI tokens used to look up CanDeactivate handlers.
\ncanLoad is an array of DI tokens used to look up CanLoad handlers.
\ndata is additional data provided to the component via ActivatedRoute.
\nresolve is a map of DI tokens used to look up data resolvers.
\nrunGuardsAndResolvers defines when guards and resolvers will be run. By default they run only when the matrix parameters of the route change. When set to paramsOrQueryParamsChange they will also run when query params change. And when set to always, they will run every time.
\nchildren is an array of child route definitions.
\nloadChildren is a reference to lazy loaded child routes.<\/p>\n

 <\/p>\n

Overview
\n@Directive({ selector: ‘router-outlet’, exportAs: ‘outlet’ })
\nclass RouterOutlet implements OnDestroy, OnInit {
\nactivateEvents: new EventEmitter<any>()
\ndeactivateEvents: new EventEmitter<any>()
\nngOnDestroy(): void
\nngOnInit(): void
\nget isActivated: boolean
\nget component: Object
\nget activatedRoute: ActivatedRoute
\nget activatedRouteData
\ndetach(): ComponentRef<any>
\nattach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute)
\ndeactivate(): void
\nactivateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver | null)
\n}<\/p>\n

How To Use
\n<router-outlet><\/router-outlet>
\n<router-outlet name=’left’><\/router-outlet>
\n<router-outlet name=’right’><\/router-outlet><\/p>\n

A router outlet will emit an activate event any time a new component is being instantiated, and a deactivate event when it is being destroyed.
\n<router-outlet
\n(activate)=’onActivate($event)’
\n(deactivate)=’onDeactivate($event)’><\/router-outlet><\/p>\n

Selectors
\nrouter-outlet<\/p>\n

Outputs
\nactivate bound to RouterOutlet.activateEvents
\ndeactivate bound to RouterOutlet.deactivateEvents
\nExported as
\noutlet<\/p>\n

Constructor
\nconstructor(parentContexts: ChildrenOutletContexts, location: ViewContainerRef, resolver: ComponentFactoryResolver, name: string, changeDetector: ChangeDetectorRef)<\/p>\n

Members
\nactivateEvents: new EventEmitter<any>()
\ndeactivateEvents: new EventEmitter<any>()
\nngOnDestroy(): void
\nngOnInit(): void
\nget isActivated: boolean
\nget component: Object
\nget activatedRoute: ActivatedRoute
\nget activatedRouteData
\ndetach(): ComponentRef<any>
\nCalled when the RouteReuseStrategy instructs to detach the subtree<\/p>\n

attach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute)
\nCalled when the RouteReuseStrategy instructs to re-attach a previously detached subtree<\/p>\n

deactivate(): void<\/p>\n

activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver | null)<\/p>\n

 <\/p>\n

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.<\/strong><\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n