height of router-outlet in angular2

I got some problem that I wanna to design a frame that slice like flex:1 and flex:2.

Separated the frame and Want the left component got same height as right compoment.(If right side height is smaller than left one, left one show 100%).

pug

.container(style='display:flex')
  .leftside(style='flex:1')
    some-component
  .rightside(style='flex:4')
    router-outlet

I implemented jquery before that the left component is rendered completely and quirk the scrollClient,hence I set the service(injectable) and observe on router.event when got navigatorEnd.

Precisely,I want to got scrollheight of router-outlet, but returns 0 every single time.

service.ts(export Toolservice)

private routerHeight:number;
constructor(private router: Router) {
  this.router.events
    .filter(event => event instanceof NavigationEnd)
    .subscribe((event) => {
      this.routerHeight = document.getElementsByTagName('router-outlet')[0].scrollHeight;
    });
}

newheight(){ return this.routerHeight;}

some-component.ts

constructor(private toolservice:Toolservice,private el:ElementRef){}
getNewHeight(){
    this.el.nativeElement.height = this.toolservice.newheight();
}