Angular集成Material Snackbar服务出现StaticInjectorError问题解决

这个错误本质是Angular的依赖注入系统找不到NotificationService的提供者，导致无法实例化服务。我来给你几个可行的解决办法：

方法1：使用Angular根级提供者推荐方式 #

在NotificationService的@Injectable装饰器里添加providedIn: 'root'，这是Angular 6+推荐的服务注册方式，Angular会自动在根模块层级提供这个服务，无需手动在模块中配置：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 新增这行，让服务成为根级单例
})
export class NotificationService {
  snackbar_notification: Subject<string> = new Subject();
  constructor() {}
  setSnackbarNotification(message: string) {
    this.snackbar_notification.next(message);
  }
}

方法2：手动在根模块注册服务提供者 #

如果你更倾向于手动管理服务的注册，可以在你的根模块（通常是AppModule）的providers数组中添加NotificationService。同时别忘了确保Material相关的模块也正确导入了，因为Snackbar依赖这些：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Material组件必备的动画模块
import { MatSnackBarModule } from '@angular/material/snack-bar'; // 导入Snackbar模块
import { AppComponent } from './app.component';
import { NotificationService } from './notification.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // 必须添加，否则Snackbar无法正常工作
    MatSnackBarModule
  ],
  providers: [NotificationService], // 在这里注册你的服务
  bootstrap: [AppComponent]
})
export class AppModule { }

额外检查点 #

• 确认AppComponent中的注入没有拼写错误，你的现有代码里的注入逻辑是正确的，但要保证NotificationService的导入路径无误。
• 确保你的Angular Material模块已经正确安装并配置，比如执行过ng add @angular/material命令，避免因依赖缺失导致的隐性错误。

按照上面的步骤修改后，依赖注入系统就能找到NotificationService的提供者，StaticInjectorError应该就会消失了。

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