2

每次单击时，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 { }
4

1 回答 1

6

在 app.module 中（或导入材质模块的任何位置）将 MAT_DIALOG_DATA 添加到来自 @angular/material 的导入中

import { MAT_DIALOG_DATA } from '@angular/material'


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

@NgModule({
  providers: [ { provide: MAT_DIALOG_DATA, useValue: [] } ]
})
于 2019-08-04T23:21:26.963 回答