html - 正确的 FAB 位置 Material Angular

Question

我需要在我的 Web 应用程序的 md-sidenav-container 中创建一个 FAB。

我的代码如下:

<md-sidenav-container>
 <!--sidenav and toolbar...-->
    <div class="content">
        <router-outlet><router-outlet/>
    </div>
</md-sidenav-container>

router-outlet 的内容是动态的，下一个将包含 FAB 的模板:

<div *ngFor="let item of items">
    <md-card>
        {{item.info}}
    </md-card>
</div>

<button md-fab color="accent" (click)="addItem()">
    <md-icon>add</md-icon>
</button>

我遇到的问题是 FAB 实际上并没有 float ，它随页面滚动:

我曾尝试使用 CSS 修复 FAB，但它不起作用，所以我一直在阅读 Material Angular docs ，特别是这样的部分:

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.

因此，我尝试将我的 FAB 放在 md-sidenav-container 之外。按照我的预期执行此操作

但有一个问题，因为这个按钮在我的router-outlet 之外，它出现在每个页面中，我需要找到一种方法来隐藏/显示它们之间的按钮，以及在每个页面中单击 时执行不同的操作。例如:我只需要在 /items,/objects 这样的页面中显示按钮，而在 /items/show/1 这样的页面中隐藏它。

我试过使用全局 bool 值，但它不起作用，因为按钮已加载到我的 AppComponent 中，并且 bool 值更新发生在其他组件中。

我能做什么？ 尝试使用 CSS 修复 FAB 位置？或者尝试找到另一种方式来显示/隐藏它？怎么办？

**编辑 2017 年 7 月 12 日 3 天后，我在 this thread 中找到了问题的解决方案。 .为了让你的按钮只出现在你想要的组件上，你需要这样做:

/* Your component.css */
.fab{
  right: 20px;
  bottom: 20px;
  position: fixed !important;
}

因此，在添加以下内容之前，这将不起作用

.mat-sidenav-container, .mat-sidenav-content {
    transform: none !important;
}

确保它位于包含 md-sidenav-container 的组件中。

Answer 1

尝试添加这个:

<button md-fab color="accent" (click)="addItem()">
    <md-icon>add</md-icon>
</button>

在您的“.content” block 中。像这样:

<div class="content">
    <button md-fab color="accent" (click)="addItem()">
        <md-icon>add</md-icon>
    </button>
    <router-outlet><router-outlet/>
</div>