Angular router-outlet 子填不上space
Angular router-outlet child can't fill space
我在使用路由器插座填充所有可用 space 时遇到问题。
我使用 angular/flex-layout 来申请。并且路由器加载的组件并没有占据所有可用位置。
<div fxLayout="column" fxFlexFill>
<maat-top-bar></maat-top-bar>
<router-outlet fxFlex></router-outlet>
</div>
Screenshot of app & dom
router-outlet 使用 space 而不是子组件。在屏幕截图上,该组件是 <maat-home></maat-home>
。在 DOM 树中,此组件放置在 router-outlet 之后。
我该怎么做才能让组件 <maat-home></maat-home>
占用剩余的 space?
谢谢!
将 fxFlex
添加到 <router-outlet>
可能不是您想要的。
路由器添加的组件是作为兄弟添加的,而不是作为 <router-outlet>
的 child
我找到了一个方法。
router-outlet 是隐藏的,在 DOM 上添加的组件具有属性 fxFlexFill
用于填充所有可用的 space.
<div fxLayout="column" fxFlexFill>
<maat-top-bar class="top-bar"></maat-top-bar>
<div fxFlex>
<router-outlet class="hidden-router"></router-outlet>
</div>
</div>
class hidden-router
.hidden-router {
flex: 1 1 auto;
display: flex;
overflow: hidden;
}
和组件
<div fxFlexFill="">
I filling all remaining space
</div>
我在使用路由器插座填充所有可用 space 时遇到问题。
我使用 angular/flex-layout 来申请。并且路由器加载的组件并没有占据所有可用位置。
<div fxLayout="column" fxFlexFill>
<maat-top-bar></maat-top-bar>
<router-outlet fxFlex></router-outlet>
</div>
Screenshot of app & dom
router-outlet 使用 space 而不是子组件。在屏幕截图上,该组件是 <maat-home></maat-home>
。在 DOM 树中,此组件放置在 router-outlet 之后。
我该怎么做才能让组件 <maat-home></maat-home>
占用剩余的 space?
谢谢!
将 fxFlex
添加到 <router-outlet>
可能不是您想要的。
路由器添加的组件是作为兄弟添加的,而不是作为 <router-outlet>
我找到了一个方法。
router-outlet 是隐藏的,在 DOM 上添加的组件具有属性 fxFlexFill
用于填充所有可用的 space.
<div fxLayout="column" fxFlexFill>
<maat-top-bar class="top-bar"></maat-top-bar>
<div fxFlex>
<router-outlet class="hidden-router"></router-outlet>
</div>
</div>
class hidden-router
.hidden-router {
flex: 1 1 auto;
display: flex;
overflow: hidden;
}
和组件
<div fxFlexFill="">
I filling all remaining space
</div>