角2のルータコンセントの高さ

Question

flex:1とflex:2のようにスライスするフレームを設計したいという問題があります。

フレームを分けて、左側のコンポーネントが右側のコンポーネントと同じ高さになるようにします（右側の高さが左側よりも小さい場合は、左のものが100%です）。

パグ

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

私はそれゆえ、私はservice(injectable)を設定し、navigatorEndを得たときrouter.eventに観察する、左の成分が完全にレンダリングされていることを前にjQueryを実装しscrollClientを気まぐれ。

正確には、scrollheightをrouter-outletにしますが、毎回0を返します。

service.ts（エクスポート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;} 

一部-component.ts

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

Answer 1

<router-outlet>タグ自体が、それがプレースホルダタグ、およびコンテンツない高さだいません内部にではなく、その下に配置されています。脇奇妙と「角度」ではないコードは、あなたは私が推測するnextElementSiblingプロパティを使用することができます：まあ

this.routerHeight = document.getElementsByTagName('router-outlet')[0].nextElementSibling.scrollHeight; 

Answer 2

を、私はあなたがdiv内router-outletを入れて、そのdiv要素のscrollHeightを得ることができると思います。

<div> 
    <router-outlet></router-outlet> 
</div>