Angular: How to get component instance of router-outlet

Question

html:

<router-outlet></router-outlet>

component:

@Component({
      selector: 'xx',
      templateUrl: './xx.html',
      styleUrls: ['./xx.css'],
      providers: [ RouterOutlet]
    })
    export class AppComponent {
    constructor(private routeroutlet: RouterOutlet){ }
    getref() {
     console.log(this.routeroutlet);
     console.log('refresh', this.routeroutlet.component);
    }
}

i'm getting this error

core.es5.js:1224 ERROR Error: Outlet is not activated
    at RouterOutlet.get [as component] (router.es5.js:5449)
    at AppComponent.onRefreshscrum (app.component.ts:343)
    at Object.eval [as handleEvent] (AppComponent.ngfactory.js:111)
    at Object.handleEvent (core.es5.js:12251)
    at Object.handleEvent (core.es5.js:12975)
    at dispatchEvent (core.es5.js:8863)
    at eval (core.es5.js:11025)
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3851)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:223)
    at SafeSubscriber.next (Subscriber.js:172)

console result:(this.routeroutlet)

RouterOutlet {
parentContexts: ChildrenOutletContexts, 
location: null, 
resolver: CodegenComponentFactoryResolver, 
changeDetector: ViewRef_, 
activated: null, …}activateEvents: EventEmitter {_isScalar: false, observers: Array(0), 
closed: false, 
isStopped: false, 
hasError: false, 
…}
closed: false
hasError: false
isStopped: false
observers: []thrown
Error: null
__isAsync: false
_isScalar: false
__proto__: Subject
activated: null
activatedRoute: (...)activatedRouteData: (...)changeDetector: ViewRef_ {_view: {…}, _viewContainerRef: null, _appRef: null}
component: [Exception: Error: Outlet is not activated
    at RouterOutlet.get [as component] (webpack:///./~/@angular/router/@angular/router.es5.js?:5449:23)
    at RouterOutlet.remoteFunction (<anonymous>:2:26)]deactivateEvents: EventEmitter {_isScalar: false, observers: Array(0), 
closed: false, 
isStopped: false, 
hasError: false, …}
isActivated: (...)location: nulllocationFactoryResolver: (...)l
ocationInjector: (...)name: "primary"
parentContexts: ChildrenOutletContexts {contexts: Map(1)}resolver: CodegenComponentFactoryResolver {_parent: null, _ngModule: NgModuleRef_, _factories: Map(52)}_activatedRoute: null__proto__: ObjectactivateWith: ƒ (activatedRoute, resolver)activatedRoute: (...)activatedRouteData: (...)attach: ƒ (ref, activatedRoute)component: (...)deactivate: ƒ ()detach: ƒ ()isActivated: (...)locationFactoryResolver: (...)locationInjector: (...)ngOnDestroy: ƒ ()ngOnInit: ƒ ()arguments: (...)caller: (...)length: 0name: ""prototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: router.es5.js:5400[[Scopes]]: Scopes[3]constructor: ƒ RouterOutlet(parentContexts, location, resolver, name, changeDetector)get activatedRoute: ƒ ()get activatedRouteData: ƒ ()get component: ƒ ()get isActivated: ƒ ()get locationFactoryResolver: ƒ ()get locationInjector: ƒ ()__proto__: Object

The above console result is for console the routeroutlet obj.

I want to access the instance of the component which is rendered in router-outlet. how i access the instance of the component?

score 45 · Accepted Answer · edited Aug 21 '20 at 13:39

45

Don't try to use RouterOutlet as a provider. Instead add the (activate) attribute to your router-outlet tag like this:

<router-outlet (activate)="onRouterOutletActivate($event)"></router-outlet>

And then in the component containing the router-outlet element (your AppComponent class) you should implement the onRouterOutletActivate method:

public onRouterOutletActivate(event : any) {
    console.log(event);
}

which will give you the route component instance in the event parameter, in this example written to the web console.

edited Aug 21 '20 at 13:39

Shamim

635
2
12
28

answered Aug 09 '17 at 10:38

Peter Salomonsen

5,525
2
24
38

See app.component.ts in this plunk: https://plnkr.co/edit/v6YxXhAq8yHs2QT0rEFX?p=preview Open the webconsole to see the component instance written to the console log – Peter Salomonsen Aug 09 '17 at 12:30
thnks bro..! it's running – Dharan Ganesan Aug 14 '17 at 07:49
1

your plnkr is dead. – alex351 Dec 19 '18 at 08:52
but while initial loading, child component wont get displayed in DOM....sample - https://stackblitz.com/edit/angular-router-basic-example-9vn8zc?file=app/app.component.ts – Kumaresan Sd Jan 27 '20 at 04:42
Not finding that this works in Angular 8. event is undefined – Captain Prinny Aug 06 '20 at 18:06

score 2 · Answer 2 · answered Jun 07 '21 at 13:39

2

to get the RouterOutlet instance, the following worked for me..

<router-outlet
  #foo="outlet"
></router-outlet>

@ViewChild( 'foo' )
foo: RouterOutlet;

https://angular.io/api/router/RouterOutlet#template-variable-references

answered Jun 07 '21 at 13:39

shunryu111

5,895
4
27
16

score -4 · Answer 3 · answered Mar 02 '19 at 02:21

-4

If you want the DOM element you will need to get the DOM element of the router-outlet, and then get the next sibling after the activate() event.

const sib = this.element.nativeElement.nextSibling;

There's several ways of getting the router-outlet element, such as with ViewChild.

Another way is with a directive, applied to router-outlet. I used this approach for a directive that adds classes to the component DOM element.

answered Mar 02 '19 at 02:21

Simon_Weaver

140,023
84
646
689

Looks like nobody liked this - but wanted to add that this no longer works with ivy since the newly added component element is now *after* the existing one (so nextSibling gives you the existing component about to be replaced). – Simon_Weaver Feb 11 '20 at 00:42

Angular: How to get component instance of router-outlet

3 Answers3

Linked

Related