在Angular2中，固定元素相对于组件而不是窗口。

Question

我有一个使用Angular2-material库进行样式设计的Angular2应用程序。我尝试添加一个浮动操作按钮 (FAB)，使其悬停在应用程序的右上角，但它会固定到其父组件而不是窗口。

该应用程序的层次结构如下：

app.component
|-detail.component

在app.component的模板中，我正在使用md-sidenav-layout指令，并将router-outlet放置在布局指令的主体中：

<md-sidenav-layout>
  <md-sidenav #sideNav (open)="closeStartButton.focus()">
    <router-outlet name="navMenu"></router-outlet>
    <br>
    <button md-button #closeStartButton (click)="sideNav.close()">Close</button>
  </md-sidenav>
  <md-toolbar color="primary">
    <button md-icon-button (click)="sideNav.toggle()">
      <md-icon class="md-24">menu</md-icon>
    </button>
    <span>{{title}}</span>
  </md-toolbar>
  <div role="main">
    <router-outlet></router-outlet>
  </div>
</md-sidenav-layout>

在详细组件模板中，我在模板顶部有以下内容：

<button md-mini-fab class="fab" (click)="toggleAdd()">
  <i class="material-icons">add</i>
</button>

该组件的CSS：

.fab {
  display: block;
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 10;
}

然而，当我导航到详细页面时，.fab相对于组件而不是窗口定位。我尝试在详细组件上使用encapsulation: ViewEncapsulation.None，但这也没有影响它。有没有一种方法可以将fab定义在详细组件内，但仍然相对于窗口固定？

- jloosli

Answer 1

寻找应用CSS变换的元素。在我的情况下，我是通过Angular动画应用变换的。显然，变换会破坏position:fixed。 为什么`transform`会破坏`position: fixed`？

我希望现在我能够弄清楚如何让它工作。

- Andrew

Answer 2

在你的app.component.html文件中添加以下代码：

<md-sidenav-container>
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
    <div class="my-content">Main content</div>
</md-sidenav-container>

全局 styles.css：

html, body, material-app, md-sidenav-container, .my-content {
    margin: 0;
    width: 100%;
    height: 100%;
}

对我有效！;)

- Sergey Andreev

---

是的！这是Angular Material在概述中提供的工作解决方案。 https://material.angular.io/components/sidenav/overview - Игорь Демянюк

Answer 3

我在这里回答了一个非常相似的问题（链接）。

要点是：我使用了一种比较复杂的方法解决了这个问题。我从主内容中移除了FAB， 在我的模板中定义了第二个路由出口（在md-sidenav-layout之外）， 为FAB创建了一个独立的组件，并在一个服务中使用可观察对象将点击事件广播到主组件。

其他帖子中的答案包含代码示例和一个可运行的Plunker示例。

- András Szepesházi