HOw to component instace when using routet-outlet

Question

This is my sample - https://stackblitz.com/edit/angular-router-basic-example-xhr5ds?file=app/app.component.ts

i want take instace of logincomponent which has been mapped to app.component.ts file using router outlet.

How can i able to get that component instace i have tried like below:

import {
  Component,
  ViewChild,
  ViewChildren,
  ContentChild,
  QueryList
} from "@angular/core";
import { LoginViewComponent } from "./views/login/login.component";

@Component({
  selector: "my-app",
  template: `
    <ejs-sidebar
      id="default-sidebar"
      #sidebar
      [target]="target"
      [width]="width"
    >
      <div>Sidebar</div>
    </ejs-sidebar>
    <div class="main-content">
      <div>
        <router-outlet></router-outlet>
      </div>
    </div>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild(LoginViewComponent, { static: false })
  DashboardComponentInstance: LoginViewComponent;
  @ViewChildren(LoginViewComponent) helloViewChildren: QueryList<
    LoginViewComponent
  >;
  @ContentChild(LoginViewComponent, { static: true })
  helloContentChild: LoginViewComponent;
  public width: string = "230px";
  public target: string = ".main-content";

  ngAfterViewInit() {
    console.log(this.DashboardComponentInstance);
    console.log(this.helloViewChildren);
    console.log(this.helloContentChild);
    var dashboardInstance = this.DashboardComponentInstance;
  }
}