当我尝试打开 Angular Material 对话框时出现 Angular7 Modal StaticInjectorError

Question

每次单击 Modal Button 时，都会出现以下错误。

UserProfileDialog 是我的对话框组件，

Error: StaticInjectorError(AppModule)[UserProfileDialog -> InjectionToken MatDialogData]:    StaticInjectorError(Platform: core)[UserProfileDialog -> InjectionToken MatDialogData]:      NullInjectorError: No provider for InjectionToken MatDialogData!     at NullInjector.push../node_modules/@angular/

我在这里尝试了所有相关的解决方案，但没有一个能奏效。

dashboard.component.ts 这是我有一个列出所有用户的表的地方，单击一行上的按钮它应该显示该用户的完整个人资料

 viewUserProfile(userId: string){
    const dialogRef = this.dialog.open(UserProfileDialog);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }

@Component({
  selector: 'user-profile-dialog',
  templateUrl: './user-profile.component.html',
  // styleUrls: ['./dashboard.component.scss']
})
export class UserProfileDialog {

  constructor(
    public dialogRef: MatDialogRef<UserProfileDialog>,
    @Inject({'data':'MAT_DIALOG_DATA'}) public data: any) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

}

app.module.ts

import { FileSelectDirective } from 'ng2-file-upload';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';

import { AuthGuard } from './_services/guard/auth.guard';
import { appRouteComponents, AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserProfileDialog } from './dashboard/dashboard.component';
import { MaterialDesignModule } from './material';
import {
    DocumentUploaderComponent
} from './register/document-uploader/document-uploader.component';
import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';

/**
 * Application components pages
 */

@NgModule({
  declarations: [
    AppComponent,
    appRouteComponents,
    DocumentUploaderComponent,
    UserProfileDialog,
    FileSelectDirective

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MaterialDesignModule,
    ReactiveFormsModule,
    BsDropdownModule.forRoot(),
    // MatDialogModule

  ],
  entryComponents: [
    UserProfileDialog
  ],
  providers: [AuthGuard,
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

在 app.module 中(或任何你导入 Material 模块的地方)添加 MAT_DIALOG_DATA 到你从@angular/material 导入

import { MAT_DIALOG_DATA } from '@angular/material'

将其添加到您的 app.module 提供者

@NgModule({
  providers: [ { provide: MAT_DIALOG_DATA, useValue: [] } ]
})