我有一个使用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定义在详细组件内,但仍然相对于窗口固定?