管理多个FAB

时间:2017-06-21 16:16:35

标签: angular angular-material2

查看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}}?

我考虑过以下方法:

  1. 我可以在名为“currentComponent”的app.component.html中添加一个字段,App State,每个组件都可以通过ngOnInit更新此字段(函数如:App Service })

  2. 我可以从'currentComponent'(currentComponent是app.component的子节点)动态生成(或“注入”)app.component.html吗?

    < / LI>

    接受其他方法。

1 个答案:

答案 0 :(得分:0)

这可以通过创建单独的<router-outlet></router-outlet>并为每条路线定义fab组件来解决。