Angular Material Snackbar位置异常且无法自动消失问题

看起来你遇到了Material Snackbar和Bootstrap 3样式冲突导致的两个棘手问题：位置跑偏到左下角，还有重复显示且无法自动消失的情况。咱们一步步来排查解决：

Angular Material 2的组件依赖主题样式和动画模块才能正常工作，先检查这两点：

• 全局样式引入：确保你在项目的全局样式文件（比如styles.css）里正确导入了Material的主题样式，不然组件的默认定位、动画都会失效：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

• 动画模块导入：Angular 5的Material组件需要BrowserAnimationsModule来支持消失这类动画逻辑，在app.module.ts里加上：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    // ...其他已导入的模块
    BrowserAnimationsModule
  ]
})
export class AppModule { }

如果没加这个模块，duration设置会完全无效，Snackbar自然不会自动消失。

Bootstrap 3的全局样式（比如body的边距、fixed类的定位规则）很容易干扰Material组件的默认样式，先做个简单测试：
暂时去掉你代码里的extraClasses:['snack-bar']，调用openSnackBar看默认效果：

openSnackBar(msg: string) {
  this.snackBar.open(msg, undefined, { duration: 2000 });
}

如果去掉自定义类后，Snackbar位置恢复底部居中且能自动消失，说明你的snack-bar类和Bootstrap的样式冲突了，要么换个类名，要么给自定义类加更高优先级的样式：

.snack-bar {
  position: fixed !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

如果去掉自定义类还是有问题，直接给Material的Snackbar容器加强制样式覆盖Bootstrap的影响：

/* 全局styles.css中添加 */
.mat-snack-bar-container {
  position: fixed !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 288px !important;
}

如果调用一次方法却出现两个相同文本的div，先确认是否不小心重复调用了openSnackBar——可以加个日志验证：

openSnackBar(msg: string) {
  console.log('Snackbar触发:', msg);
  this.snackBar.open(msg, undefined, { duration: 2000 });
}

如果日志只出现一次但还是有重复元素，那就是样式加载顺序的问题：确保Material的样式在Bootstrap之后导入，这样Material的样式优先级更高。在Angular 5的.angular-cli.json（新版本是angular.json）的styles数组里调整顺序：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "~@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.css"
]

按照这个流程排查，应该能解决你的Snackbar定位和自动消失问题。

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