gniazdo routera zajmuje więcej miejsca na stronie (Angular 2)

Question

Oto interesujące pytanie, które ignorowałem do tej pory. Wygląda na to, że Angular2 renderuje zawartość wewnątrz znaczników dyrektyw. Ale w przypadku gniazd routera zdarza się, że jest jak rodzeństwo.

Moje pierwsze pytanie brzmi: dlaczego? Właśnie w interesie.

Nie martwiłbym się tym zbytnio, ale obecnie powoduje on problem w mojej aplikacji. Mam dwa zagnieżdżone gniazda i z jakiegoś niewytłumaczalnego powodu dziecko ma 15px wzrostu na stronie i nie ma znaczenia, co robię, nie mogę się tego pozbyć. (zobacz zrzut ekranu)

Czy to, co opisałem naprawdę, czy po prostu robię coś nie tak? Ponadto nie mam pojęcia, jak się do tego podejść, przeszukać wszystko, niczego nie znaleźć.

Dzięki za pomoc.

UPDATE tutaj jest moja mniej file:

@import "../../node_modules/bootstrap-less/bootstrap/bootstrap"; 
@import "../../node_modules/font-awesome/less/font-awesome"; 
@icon-font-path: "./bootstrap/fonts/"; 
@fa-font-path: "./font-awesome/fonts"; 
@import "rrm.less"; 

html, body { 
    height: 100% !important; 
} 
body { 
    padding-top: 80px; 
} 
.load-container { 
    background: rgba(0, 0, 0, 0.5); 
    width: 100%; 
    height: 100%; 
    .loaing { 
    position: fixed; 
    left: 50%; 
    top: 35%; 
    z-index: 1000; 
    height: 31px; 
    width: 31px; 
    } 
} 
.top-navbar { 
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); 
    background-color: #FFFFFF; 
    height: 80px; 
    &.floating { 
    .box-shadow(0 1px 3px rgba(0,0,0,.25)); 
    } 
    .navbar-brand { 
    height: auto; 
    img { 
     height: 60px; 
    } 
    } 
    .navbar-nav > li > a { 
    font-size: 20px; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    line-height: 50px; 
    } 
} 
.rrm-container { 
    height:100%; 
    display: table; 
    width: 100%; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding-left: 0px; 
    padding-right: 0px; 
    .rrm-wrapper { 
    height: 100%; 
    display: table-row; 
    .left-menu { 
     float: none; 
     display: table-cell; 
     .box-shadow(0 1px 3px rgba(0,0,0,.25)); 
     ul { 
     li { 
      border: none; 
      background-color: transparent; 
     } 
     } 
    } 
    .content { 
     float: none; 
     display: table-cell; 
    } 
    } 
} 

A oto model box że FF oblicza:

Answer 1

W odpowiedzi na pierwsze pytanie, dlaczego umieść szablon komponentu jako rodzeństwo w <router-outlet>, a nie w jego wnętrzu, jest kilka githu b nici, które rzucają trochę światła.

https://github.com/angular/angular/issues/8529#issuecomment-217718704 https://github.com/angular/angular/issues/4679

Najbardziej istotne:

Oryginalny powodem takiego zachowania było umożliwienie animacji elementów między widokami w czasie których oba składniki źródłowy i docelowy musiałby być aktywny