title: Angular: How to get component instance of router-outlet
body: <p>html:</p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>component:</p>
  
  <pre><code>@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);
      }
  }
  </code></pre>
  
  <p>i'm getting this error</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>console result:(this.routeroutlet)</p>
  
  <pre><code>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 (&lt;anonymous&gt;: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
  </code></pre>
  
  <p>The above console result is for console the routeroutlet obj.</p>
  
  <p>I want to access the instance of the component which is rendered in router-outlet. how i access the instance of the component?</p>