正确的FAB位置材料角度

Question

我需要在我的网络应用程序中的dependencies { androidCompile files('libs/android-support-v4.jar') compileNoRetrolambda files('libs/android-support-v4.jar') } 内创建一个FAB。

我的代码如下：

md-sidenav-container

<md-sidenav-container> <!--sidenav and toolbar...--> <div class="content"> <router-outlet><router-outlet/> </div> </md-sidenav-container> 的内容是动态的，包含FAB的模板是下一个：

router-outlet

我遇到的问题是FAB实际上没有浮动，它会随页面滚动：

我已尝试使用CSS修复FAB，但它无法正常工作，所以我一直在阅读材质角docs，特别是那部分说明：

  

侧边的FAB

     

对于带有FAB（或其他浮动元素）的sidenav，推荐的方法是将FAB放在可滚动区域之外并绝对定位它。

所以，我试图把我的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> 之外。这样做符合我的预期

但有问题，由于此按钮位于我的md-sidenav-container之外，它出现在每个页面中，我需要找到一种方法来隐藏/显示这些按钮之间的按钮，以及执行不同的操作时在每个页面中单击。例如：我需要仅在router-outlet等网页中显示该按钮，并将其隐藏在/items, /objects等网页中。

我尝试使用全局布尔值，但由于按钮已加载到AppComponent中，因此它不起作用，布尔更新发生在其他组件中。

我该怎么办？ 尝试使用CSS修复FAB位置？或尝试找到另一种显示/隐藏方式？怎么样？

**编辑07/12/17 3天后，我在this thread找到了问题的解决方案。为了使您的按钮仅在您想要的组件上，您需要这样做：

/items/show/1

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

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

确保它位于包含.mat-sidenav-container, .mat-sidenav-content { transform: none !important; } 的组件中。

Answer 1

尝试添加：

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

在'.content'区块内。像这样：

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