时间戳

首页 > 解决方案 > 在库中使用 MatSnackBar

angular - 在库中使用 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, multi: true },
        { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

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

错误 NullInjectorError: R3InjectorError(AppModule)[InjectionToken MatSnackBarData -> InjectionToken MatSnackBarData -> InjectionToken MatSnackBarData]: NullInjectorError: No provider for 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 的所有参数：（？，？）。

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

标签： angularangular-materialangular-librarysnackbarinjection-tokens

解决方案

当您看到此类消息时

main.ts:12 错误：无法解析 MatSnackBarRef 的所有参数：（？，？）。

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

问题源于您写的事实

{
        provide: MatSnackBarRef,
        useClass: MatSnackBarRef,
},

在这里，您尝试注入具有两个依赖项的真实服务 MatSnackBarRef（参见MatSnackBarRef 的构造函数）

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

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

{
        provide: MatSnackBarRef,
        useValue: {},
},

推荐阅读