我在库中使用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 {}
在我看来，这应该是可行的。我在库中还有很多其他组件，它们都工作得很好。但是当我尝试在上面的状态下运行我的应用程序时，我得到了这个错误:
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
},
当我这样做时，我得到一个新的错误:
ERROR NullInjectorError: R3InjectorError(AppModule)[MatSnackBarRef ->MatSnackBarRef→MatSnackBarRef]:NullInjectorError:没有MatSnackBarRef的提供者!
所以我试着添加另一个提供者，像这样:
{
provide: MatSnackBarRef,
useClass: MatSnackBarRef,
},
现在我得到一个新的消息:
主要。ts:12错误:无法解析MatSnackBarRef:(的所有参数??)。
我不明白为什么我要在提供者身上瞎折腾。有人知道我做错了什么吗?
当你看到这种类型的消息
主要。ts:12错误:无法解析MatSnackBarRef:(的所有参数??)。
这是一个非常清楚的错误信息，告诉你你试图注入的依赖(MatSnackBarRef)有两个其他依赖，而依赖注入机制没有找到它们。每个问号?代表服务构造函数中的一个依赖项。
问题的根源在于你写了
{
provide: MatSnackBarRef,
useClass: MatSnackBarRef,
},
这里你试图注入real服务MatSnackBarRef，它有两个依赖关系(参考MatSnackBarRef的构造函数)
当你进行单元测试时，你应该尽可能地模拟依赖关系，以避免陷入依赖地狱(在你的测试平台中添加依赖的依赖)
这是一个简单的依赖性模拟(只使用一个空对象)，但是您可以用您自己的实现
替换测试中需要的任何属性。{
provide: MatSnackBarRef,
useValue: {},
},