这是一个有趣的问题,直到现在,我还是有点忽略了。
似乎angular2呈现了指令标记中的内容。但是,对于路由器出口来说,它恰巧像一个兄弟。
我的第一个问题是:为什么?只是出于兴趣。
我不太担心,但它现在确实在我的应用程序中造成了一个问题。我有两个嵌套的插座,出于某种莫名其妙的原因,孩子一号在页面上的高度是15像素,无论我做什么,我都摆脱不了。(见截图)
我所描述的是真的吗?还是我只是做错了什么?
而且,我现在也不知道该怎么处理,到处找,什么也没找到。
谢谢你的帮助。
更新
这是我的小文件:
@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计算的盒子模型:
最佳答案
为了回答您的第一个问题:为什么将组件模板作为<router-outlet>
的同级而不是放在它的内部,有几个github线程提供了一些帮助。
https://github.com/angular/angular/issues/8529#issuecomment-217718704
https://github.com/angular/angular/issues/4679
最相关的:
此行为的原始原因是启用视图之间元素的动画,在此期间,源组件和目标组件都需要处于活动状态
关于angular - 路由器 socket 在页面上占用更多空间( Angular 2),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36514439/