查看Angular Material2 Spec,它们清楚地说明了放置FAB的位置。但是,我在实施它时遇到了麻烦。
我的项目在根组件(app)中包含md-sidenav
,我想在其子组件中使用FAB,但因为它们包含在md-sidenav-container
中,所以绝对定位某些东西并不是'按预期工作(我听说过有关硬件加速和重写轴的事情,但如果有人能更清楚地解释一下 - 那就太棒了。
我接受了材料文档并发现了这个:
在sidenav里面的FAB:
对于带有FAB(或其他浮动元素)的sidenav,建议使用 方法是将FAB放在可滚动区域之外 绝对定位它。
所以我有一些方向,但我不清楚如何为许多组件和路线管理它。
为了完整起见,我已经包含了一些代码:
app.component.html
:
<md-sidenav-container>
<md-sidenav>
</md-sidenav>
<router-outlet></router-outlet>
</md-sidenav-container>
sample component.html
:
<md-toolbar><md-toolbar>
<div class="page-content">
<!-- Page content starts here -->
</div>
如果我要关注文档,我的FAB将放在我的app.component.html
中:
<button md-fab><md-icon>filter_list</md-icon>
<md-sidenav-container>
<md-sidenav>
</md-sidenav>
<router-outlet></router-outlet>
</md-sidenav-container>
但是,我不希望在所有路由上显示此按钮(就像app.component.html
的情况一样),我希望此按钮显示某个组件(或路由)何时处于活动状态。
在md-sidenav-container
的子路由和组件中实施(并管理 - 显示,隐藏,执行其他操作,更改图标)FAB的最佳方式是什么?{/ 1}}?
我考虑过以下方法:
我可以在名为“currentComponent”的app.component.html
中添加一个字段,App State
,每个组件都可以通过ngOnInit
更新此字段(函数如:App Service
})
我可以从'currentComponent'(currentComponent是app.component的子节点)动态生成(或“注入”)app.component.html吗?
< / LI>接受其他方法。
答案 0 :(得分:0)
这可以通过创建单独的<router-outlet></router-outlet>
并为每条路线定义fab组件来解决。