Роутер-выход занимает дополнительное место на странице (Angular 2)

Вот интересный вопрос, который я до сих пор игнорировал. Похоже, что Angular2 отображает содержимое внутри тегов директивы. Но, для маршрутизатора-выхода, это похоже на брата.

Мой первый вопрос: почему? Просто из интереса.

Я бы не стал беспокоиться об этом, но теперь это действительно вызывает проблемы в моем приложении. У меня есть два вложенных выхода и по какой-то необъяснимой причине, что один из них занимает 15 пикселей на странице и не имеет значения, что я делаю, я не могу избавиться от него. (см. снимок экрана)

То, что я описал, действительно так, или я просто делаю что-то неправильно? Кроме того, я понятия не имею, как подойти к этому, обыскал по всему, ничего не нашел.

Спасибо за вашу помощь.

UPDATE здесь мой файл меньше:

@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;
    }
  }
}

И вот полевая модель, которую FF вычисляет:

Ответы

Ответ 1

В ответ на ваш первый вопрос о том, почему место шаблона компонента является родным <router-outlet>, а не внутри него, есть несколько потоков github, которые проливают некоторый свет.

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

Самое актуальное:

Первоначальная причина такого поведения заключалась в том, чтобы включить анимацию элементов между представлениями, в течение которых оба компонента источника и получателя должны быть активными