Question

这是一个有趣的问题，我有点无视，直到现在。似乎Angular2在指令标记内呈现内容。但是，对于路由器插座，它恰好就像一个兄弟姐妹。

我的第一个问题是：为什么？只是出于兴趣。

我不会太担心，但它现在实际上导致我的应用程序出现问题。我有两个嵌套的出口，由于一些莫名其妙的原因，孩子在页面上占据15px的高度，无论我做什么，我都无法摆脱它。（见截图）

我所描述的确是如此，或者我只是做错了什么？另外，我现在还不知道如何处理这个问题，全部搜查，都没找到。

感谢您的帮助。

更新这是我的文件：

@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计算的盒子模型：

Answer 1

为了回答你的第一个问题，即为什么将组件模板作为<router-outlet>的兄弟而不是它的内部，有一些github线程可以解决这个问题。

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

最相关：

此行为的最初原因是在视图之间启用元素动画，在此期间源和目标组件都需要处于活动状态

Answer 2

我知道这已经很老了，但是最近我遇到了这个问题，并做了一些调查。我希望这对某人有帮助。

很难确定问题，因为当我检查元素时，似乎只是空白。

最后，问题是由路由器出口内的托管组件引起的，即段落标签

包含页边距顶部。我将p标签的页边距设置为0，问题就消失了。

由于上面的注释指出行高0解决了该问题，因此我才发现此问题。但这只是子元素将页面向下（奇怪地）向下推的余量。

router-outlet占用页面上的额外空间（Angular 2）

2 个答案: