MatSnackBar 显示问题，没有样式，定位错误

Posted 2023-02-23

【中文标题】MatSnackBar 显示问题，没有样式，定位错误

【英文标题】：MatSnackBar display problem, no styling, wrong positioning

【发布时间】：2021-08-11 02:36:14

【问题描述】：

我对 MatSnackBar（以及该项目中的任何其他小吃店插件）有一个非常烦人的问题。 当我“打开”snackbar 时，它确实显示在 DOM 上，但没有任何样式（没有背景，错误的定位，看起来像一个简单的块定位（左下角）。并且将配置添加到打开的功能不会改变任何东西。正如我所说，我尝试安装另一个小吃吧插件，我遇到了同样的问题，所以这不是插件的具体问题。

我试图查看我的代码和互联网，但没有找到任何解决方案（已经尝试添加 ngZone：没有结果）

这里是小吃店的展示：

所以我的服务触发了snackbar：

import MatSnackBar from '@angular/material/snack-bar';

@Injectable(
  providedIn: 'root'
)
export class SnackbarService 

  constructor(private snackBar: MatSnackBar,
              private zone: NgZone)  

  openSuccess(msg: string): void 
    this.zone.run(() => 
      this.snackBar.open(msg, null, duration: 3000, verticalPosition: 'top', horizontalPosition: 'center', );
    );
  

  openError(msg: string): void 
    this.zone.run(() => 
      this.snackBar.open(msg, null, duration: 3000, verticalPosition: 'top', horizontalPosition: 'center');
    );
  

这是我的 package.json ：

  "name": "drexter-front",
  "version": "0.0.0",
  "scripts": 
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  ,
  "private": true,
  "dependencies": 
    "@angular/animations": "~11.0.0",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/fire": "^6.1.4",
    "@angular/forms": "~11.0.0",
    "@angular/material": "^11.0.0",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "@datorama/akita": "^6.1.3",
    "firebase": "^8.6.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "~0.1100.0",
    "@angular/cli": "~11.0.0",
    "@angular/compiler-cli": "~11.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.7.1",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.6.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  

最后是我的 app.module.ts ：

import  BrowserModule  from '@angular/platform-browser';
import NgModule from '@angular/core';


import firebaseConfig from '../environments/environment';

import AngularFireFunctionsModule, REGION from '@angular/fire/functions';
import AppComponent from './app.component';
import FooterComponent from './shared/components/footer/footer.component';
import HomeComponent from './pages/home/home.component';
import AlmondCancellationComponent from './pages/almond-cancellation/almond-cancellation.component';
import PenaltyDiscountsComponent from './pages/penalty-discounts/penalty-discounts.component';
import SocialServicesRequestsComponent from './pages/social-services-requests/social-services-requests.component';
import HeaderComponent from './shared/components/header/header.component';
import PricingComponent from './pages/pricing/pricing.component';
import AidAndSubsidiesComponent from './pages/aid-and-subsidies/aid-and-subsidies.component';
import CustomInputComponent from './shared/utils/custom-input/custom-input.component';
import ProfileComponent from './pages/profile/profile.component';
import CustomButtonComponent from './shared/utils/custom-button/custom-button.component';
import FormSectionComponent from './shared/components/form-section/form-section.component';
import CustomRadioComponent from './shared/utils/custom-radio/custom-radio.component';
import DropzoneDirective from './shared/directives/dropzone.directive';
import CancellationProcessComponent from './pages/almond-cancellation/cancellation-process/cancellation-process.component';
import NewsletterComponent from './shared/components/newsletter/newsletter.component';
import LoginComponent from './pages/login/login.component';
import FormsModule from '@angular/forms';
import BrowserAnimationsModule from '@angular/platform-browser/animations';
import AppRoutingModule from './app-routing.module';
import MatSnackBarModule from '@angular/material/snack-bar';
import MatProgressSpinnerModule from '@angular/material/progress-spinner';
import AngularFireModule from '@angular/fire';
import AngularFireAnalyticsModule from '@angular/fire/analytics';
import AngularFireAuthModule from '@angular/fire/auth';
import AngularFireStorageModule from '@angular/fire/storage';




@NgModule(
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    HomeComponent,
    AlmondCancellationComponent,
    PenaltyDiscountsComponent,
    SocialServicesRequestsComponent,
    AidAndSubsidiesComponent,
    PricingComponent,
    ProfileComponent,
    CustomInputComponent,
    CustomButtonComponent,
    NewsletterComponent,
    LoginComponent,
    CancellationProcessComponent,
    FormSectionComponent,
    DropzoneDirective,
    CustomRadioComponent
  ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        BrowserAnimationsModule,
      MatSnackBarModule,
      MatProgressSpinnerModule,
      AngularFireModule.initializeApp(firebaseConfig),
      AngularFireAnalyticsModule,
      AngularFireAuthModule,
      AngularFireStorageModule,
      AngularFireFunctionsModule
    ],
  providers: [ provide: REGION, useValue: 'europe-west1' ],
  bootstrap: [AppComponent]
)
export class AppModule  

提前谢谢，我现在被这个问题困住了。

【参考方案1】：

这是我创建的一个新项目，用于重试：https://github.com/samuel-videau/matsnackbar-help

我只做了三件事：

创建项目（新） npm i @angular/material MatSnackBar 用法

但仍然无法正常工作