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

我用路由器插座填充所有可用空間時遇到問題。角度路由器插座子不能填充空間

我對我的應用程序使用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

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

回答

相關問題