在库中使用 MatSnackBar

问题描述

我在库中使用 MatSnackBar 时遇到问题。 我创建了一个简单的组件，如下所示：

<div class="situ-error-snackbar">
    <span>{{message}}</span>
    <button type="button" mat-icon-button (click)="close()">
        <mat-icon>closer</mat-icon>
    </button>
</div>

代码如下：

import {
  Component,Inject,Input,OnInit,ViewEncapsulation,} from '@angular/core';

import {
  MatSnackBarRef,MAT_SNACK_BAR_DATA,} from '@angular/material/snack-bar';

@Component({
  selector: 'situ-error-snackbar',templateUrl: './error-snackbar.component.html',styleUrls: ['./error-snackbar.component.scss'],encapsulation: ViewEncapsulation.None,})
export class ErrorSnackbarComponent implements OnInit {
  @input() duration: number = 5000;

  public constructor(
    @Inject(MAT_SNACK_BAR_DATA) public message: string,public snackBarRef: MatSnackBarRef<ErrorSnackbarComponent>
  ) {}

  public ngOnInit(): void {}

  public close(): void {
    this.snackBarRef.dismiss();
  }
}

我有一个调用它的服务：

public show(notifcation: Notification): void {
  let config: MatSnackBarConfig = {
    panelClass: notifcation.type,verticalPosition: 'top',duration: 5000,data: notifcation.message,};

  this.snackBar.openFromComponent(ErrorSnackbarComponent,config);
}

所有这些都在我一直在开发的自定义库中。 error-snackbar 有一个如下所示的模块：

import { NgModule } from '@angular/core';

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatSnackBarModule } from '@angular/material/snack-bar';

import { ErrorSnackbarComponent } from './error-snackbar.component';

@NgModule({
  imports: [MatButtonModule,MatIconModule,MatSnackBarModule],declarations: [ErrorSnackbarComponent],exports: [ErrorSnackbarComponent],})
export class ErrorSnackbarModule {}

在我的应用程序中，我想在出现错误时显示 ErrorSnackbar，因此我将其添加到 AppComponent 中，如下所示：

<router-outlet></router-outlet>

<situ-error-snackbar></situ-error-snackbar>

然后我像这样在 app.module 中导入库模块：

@NgModule({
    declarations: [AppComponent],imports: [
        browserModule,browserAnimationsModule,HttpClientModule,CoreModule,AppRoutingModule,MatAutocompleteModule,MatDatepickerModule,MatNativeDateModule,MatSelectModule,ErrorSnackbarModule,],providers: [
        { provide: HTTP_INTERCEPTORS,useClass: BearerAuthInterceptor,multi: true },{ provide: HTTP_INTERCEPTORS,useClass: ErrorInterceptor,{ provide: MAT_DATE_LOCALE,useValue: 'en-GB' },bootstrap: [AppComponent],})
export class AppModule {}

在我看来，这应该可行。我在该库中还有许多其他组件，它们都可以正常工作。但是当我尝试在上述状态下运行我的应用程序时，我收到此错误：

ERROR NullInjectorError: R3InjectorError(AppModule)[InjectionToken MatSnackBarData -> InjectionToken MatSnackBarData -> InjectionToken MatSnackBarData]： NullInjectorError：没有 InjectionToken MatSnackBarData 提供程序！

我用谷歌搜索了错误并在这里找到了类似的东西： https://github.com/angular/universal-starter/issues/493

所以我按照他们说的做了并将其添加到 app.module 中：

{
    provide: MAT_SNACK_BAR_DATA,useValue: {},// Add any data you wish to test if it is passed/used correctly
},

当我这样做时，我收到一个新错误：

错误 NullInjectorError: R3InjectorError(AppModule)[MatSnackBarRef -> MatSnackBarRef -> MatSnackBarRef]: NullInjectorError: 没有 MatSnackBarRef 的提供者！

所以我尝试添加另一个这样的提供者：

    {
        provide: MatSnackBarRef,useClass: MatSnackBarRef,},

现在我收到一条新消息：

main.ts:12 错误：无法解析 MatSnackBarRef 的所有参数：(?,?).

我不明白为什么我必须与提供商混在一起。有谁知道我做错了什么？

解决方法

当您看到此类消息时

main.ts:12 错误：无法解析 MatSnackBarRef 的所有参数：(?,?).

这是一条非常明确的错误消息，告诉您您尝试注入的依赖项 (MatSnackBarRef) 有两个其他依赖项，并且依赖项注入机制没有找到它们。每个问号 ? 代表服务构造函数中的一个依赖项。

问题源于你写的事实

{
        provide: MatSnackBarRef,useClass: MatSnackBarRef,},

在这里，您尝试注入具有两个依赖项的真实服务 MatSnackBarRef（参见 the constructor of MatSnackBarRef）

在进行单元测试时，您应该尽可能地模拟依赖项，以避免陷入依赖地狱（在测试平台中添加依赖项的依赖项）

这是一个简单的依赖模拟（只使用一个空对象），但你可以用你自己的实现替换测试中需要的任何属性

{
        provide: MatSnackBarRef,useValue: {},