router-outlet richiede ulteriore spazio sulla pagina (Angular 2)

Question

Ecco una domanda interessante che stavo ignorando, fino ad ora. Sembra che Angular2 restituisca il contenuto all'interno dei tag direttiva. Ma, per router-outlet, sembra essere come un fratello.

La mia prima domanda è: perché? Solo per interesse.

Non mi preoccuperei molto, ma ora causa effettivamente un problema nella mia app. Ho due uscite annidate e per qualche motivo inspiegabile, il bambino prende 15px in altezza sulla pagina e non importa quello che faccio, non posso liberarmene. (vedi lo screenshot)

È quello che ho descritto veramente il caso o sto semplicemente facendo qualcosa di sbagliato? Inoltre, non ho idea a questo punto come avvicinarsi a questo, perlustrato dappertutto, non abbia trovato nulla.

Grazie per il vostro aiuto.

UPDATE Ecco il mio meno del 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; 
    } 
    } 
} 

E qui è il modello di dialogo che FF calcola:

Answer 1

In risposta alla tua prima domanda del perché posiziona il modello del componente come fratello di <router-outlet> e non all'interno di esso, ci sono un paio di githu b fili che fanno luce.

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

più rilevanti:

Il motivo originale per questo comportamento era quello di consentire l'animazione di elementi tra le viste durante i quali entrambi i componenti di origine e destinazione avrebbe bisogno di essere attivi