在 Angular 2 材质中添加粘性 FAB答案

【问题标题】：adding Sticky FAB in Angular 2 Material在 Angular 2 材质中添加粘性 FAB
【发布时间】：2017-09-27 22:23:39
【问题描述】：

我想在我的 Angular 2 材质项目中的屏幕底部（不是页面）添加一个粘性按钮。我尝试了一些调整，但目前当我向下滚动按钮时，它并没有停留在它应该在的位置。

滚动前如下所示：

滚动后：

模板内元素的 HTML：

<a md-fab id="fab">
    <md-icon>add</md-icon>
</a>

在元素上应用 CSS 任何默认值除外：

#fab{
    position: fixed;
    right: 30px;
    bottom: 30px;
}
*{
    margin: 0;
}

我该如何解决这个问题？
此外，是否有任何内置的 Angular 材料可以满足我的需求？

更新：

我的主要组件的模板：

<toolbar></toolbar>
<side-nav></side-nav>

侧导航的模板：

<md-sidenav-container id="sidenav-container">

    // contents

    <router-outlet></router-outlet>

</md-sidenav-container>

及其 CSS：

#sidenav-container { // styling to make side nav of full height
    position: fixed;
    height: 90%;
    min-height: 90%;
    width: 100%;
    min-width: 100%;
}

然后在router-outlet添加的组件内部会出现FAB元素。

Notes-list 组件的模板（如图所示）：

<a md-fab id="fab">
    <md-icon>add</md-icon>
</a>

//rest of the content

LIVE DEMO

【问题讨论】：

标签： css angular angular-material angular-directive

【解决方案1】：

将路由器插座放在 md-sidenav-container 中是正确的。

将关注类添加到您的 FAB 元素中。

.md-fab-bottom-right2 {
    top: auto !important;
    right: 20px !important;
    bottom: 10px !important;
    left: auto !important;
    position: fixed !important;
}

这就是我让它工作的方式。

【讨论】：

【解决方案2】：

添加一个自定义类并应用您的样式，同时查找文件引用到 DOM 的层次结构

<div class="example-container">    

  <h3>sticky icons</h3>
  <a class="mine" md-fab routerLink=".">
    <md-icon>check</md-icon>
  </a>
  <a md-mini-fab routerLink=".">
    <md-icon>check</md-icon>
  </a>

</div>

LIVE DEMO

更新 1：您正在使用 md-sidenav 容器内的图标，这是一个错误

<div class="example-container">
  <md-sidenav-container>

    <md-sidenav #sidenav>
      <p>side nav works</p>
    </md-sidenav>

  </md-sidenav-container>
    <p>content</p>
    <a class="mine" md-fab (click)="sidenav.open()">
      <md-icon>check</md-icon>
    </a>

</div>

Updated Demo

更新 2：

看看下面的代码，你把所有的东西都包装在 sidenav 里面，这是错误的。如下使用

<md-sidenav-container id="sidenav-container">    </md-sidenav-container>
        // contents
    <router-outlet></router-outlet>

【讨论】：

那我一定是遗漏了一些东西，你在 FAB 上应用了相同的样式并且效果很好。
查看您的参考层次结构
我添加了组件的层次结构。我猜side-nav-container的css一定是有问题的。
不是组件层次结构。您需要查找的样式表层次结构
看看我提供的现场演示。我在 sidenav 中添加了您的 plunk 内容。