title: height of router-outlet in angular2
body: <p>I got some problem that I wanna to design a frame that slice like <code>flex:1</code> and <code>flex:2</code>.</p>
  
  <p>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 <code>100%</code>).</p>
  
  <p><strong>pug</strong></p>
  
  <pre><code>.container(style='display:flex')
    .leftside(style='flex:1')
      some-component
    .rightside(style='flex:4')
      router-outlet
  </code></pre>
  
  <p>I implemented jquery before that the left component is rendered completely and quirk the <code>scrollClient</code>,hence I set the <code>service(injectable)</code> and observe on <code>router.event</code> when got <code>navigatorEnd</code>.</p>
  
  <p>Precisely,I want to got <code>scrollheight</code> of  <code>router-outlet</code>, but returns <code>0</code> every single time.</p>
  
  <p><strong>service.ts(export Toolservice)</strong></p>
  
  <pre><code>private routerHeight:number;
  constructor(private router: Router) {
    this.router.events
      .filter(event =&gt; event instanceof NavigationEnd)
      .subscribe((event) =&gt; {
        this.routerHeight = document.getElementsByTagName('router-outlet')[0].scrollHeight;
      });
  }
  
  newheight(){ return this.routerHeight;}
  </code></pre>
  
  <p><strong>some-component.ts</strong></p>
  
  <pre><code>constructor(private toolservice:Toolservice,private el:ElementRef){}
  getNewHeight(){
      this.el.nativeElement.height = this.toolservice.newheight();
  }
  </code></pre>