角度路由器插座子不能填充空间

我用路由器插座填充所有可用空间时遇到问题。角度路由器插座子不能填充空间

我对我的应用程序使用angular/flex-layout。而装有路由器的组件并不占用所有可用的位置。

<div fxLayout="column" fxFlexFill> 
    <maat-top-bar></maat-top-bar> 
    <router-outlet fxFlex></router-outlet> 
</div>

Screenshot of app & dom

路由器出口采取的空间，而不是子组件。在屏幕截图上，组件是<maat-home></maat-home>。在DOM树中，此组件位于路由器插座之后。

我该怎么做，所以组件<maat-home></maat-home>将采取剩余空间？

谢谢！

来源

2017-05-12 johan pujol

我找到了一种方法。路由器插座处于隐藏状态，DOM上添加的组件具有用于填充所有可用空间的属性fxFlexFill。

<div fxLayout="column" fxFlexFill> 
    <maat-top-bar class="top-bar"></maat-top-bar> 
    <div fxFlex> 
    <router-outlet class="hidden-router"></router-outlet> 
    </div> 
</div>

类hidden-router

.hidden-router { 
    flex: 1 1 auto; 
    display: flex; 
    overflow: hidden; 
}

和组件

<div fxFlexFill=""> 
    I filling all remaining space 
</div>

来源

2017-05-16 05:31:49

我相信你可以用 “fxFill”，而不是fxFlexFill = “” 或者至少这是工作在我的情况 – Yoshi9143

将fxFlex添加到<router-outlet>可能不是您想要的。由路由器添加的组件添加为兄弟，而不是孩子的<router-outlet>

来源

2017-05-12 09:47:32

角度路由器插座子不能填充空间

回答

相关问题