如何用Angular Material2创建可打开bottom-sheet的悬浮按钮

我来帮你搞定这个需求！要实现一个位于Bottom Sheet上方、点击能触发打开它的悬浮按钮，用Angular Material2可以按以下步骤操作：

1. 导入必要的Angular Material模块 #

首先在你的模块文件（比如app.module.ts）里导入所需模块，确保能使用悬浮按钮和Bottom Sheet组件：

import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatFabModule } from '@angular/material/fab';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    // 其他项目依赖模块
    MatBottomSheetModule,
    MatFabModule,
    MatButtonModule
  ]
})
export class AppModule { }

2. 编写组件模板（HTML） #

在组件的HTML文件中，添加悬浮按钮和Bottom Sheet的内容模板：

<!-- 悬浮按钮 -->
<button mat-fab color="primary" class="floating-btn" (click)="openBottomSheet()">
  +
</button>

<!-- Bottom Sheet的内容模板 -->
<ng-template #bottomSheetContent>
  <div class="sheet-content">
    <p>这是Bottom Sheet的内容区域</p>
    <button mat-button (click)="closeBottomSheet()">关闭</button>
  </div>
</ng-template>

3. 实现组件逻辑（TS） #

在组件的TypeScript文件里，编写打开和关闭Bottom Sheet的方法：

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { MatBottomSheet } from '@angular/material/bottom-sheet';

@Component({
  selector: 'app-bottom-sheet-demo',
  templateUrl: './bottom-sheet-demo.html',
  styleUrls: ['./bottom-sheet-demo.css']
})
export class BottomSheetDemoComponent {
  @ViewChild('bottomSheetContent') bottomSheetContent!: TemplateRef<any>;

  constructor(private bottomSheet: MatBottomSheet) { }

  openBottomSheet(): void {
    this.bottomSheet.open(this.bottomSheetContent);
  }

  closeBottomSheet(): void {
    this.bottomSheet.dismiss();
  }
}

4. 添加样式确保按钮层级高于Bottom Sheet #

关键是通过CSS设置按钮的固定定位和层级，让它始终显示在Bottom Sheet上方：

.floating-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000; /* 这个值要大于Bottom Sheet默认的z-index（998），确保按钮不被遮挡 */
}

.sheet-content {
  padding: 24px;
}

效果参考你提供的截图：

这样设置后，悬浮按钮会固定在页面右下角，点击后弹出Bottom Sheet，且按钮始终保持在Sheet上方，不会被遮挡。

内容的提问来源于stack exchange，提问作者user7362292