管理多个 FAB

Question

查看 Angular Material2 规范，他们清楚地说明了放置 FAB 的位置。但是，我在实现它时遇到了问题。

我的项目在根组件 (app) 中包含 md-sidenav，我想在其子组件中使用 FAB，但因为它们包含在 md-sidenav-container 中，绝对定位某些东西没有按预期工作（我听说过一些关于硬件加速和重写轴的事情，但如果有人能解释得更清楚一点——那就太好了。

我查看了 material 文档并发现了这个：

FABs inside sidenav:

For a sidenav with a FAB (or other floating element), the recommended approach is to place the FAB outside of the scrollable region and absolutely position it.

所以我有一些方向，但我不清楚如何管理许多组件和路由。

为了完整起见，我包含了一些我的代码：

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 就是这种情况），我希望此按钮在某个组件（或路线）处于活动状态时显示。

实施（和管理——显示、隐藏、做其他事情、更改图标）在 app.component.html 跨子路由和组件的 md-sidenav-container FAB 的最佳方法是什么？

我考虑过以下方法：

我可以向我的 App State 添加一个名为 "currentComponent" 和 ngOnInit 的字段，每个组件都可以通过 App Service （函数像：this.appservice.newCompInit(this.componentName) )
我可以生成（或 "inject"）从 'currentComponent' 到 app.component.html 的 FAB（currentComponent 是 app.component)?

接受其他方法。

Answer 1

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

管理多个 FAB

Managing several FABs

angular-material2

angular