Angular 5.0 StaticInjectorError

Question

我正在尝试打开对话框。当我按下一个按钮，但出现以下错误时：

ERROR Error: StaticInjectorError(AppModule)[UsertableComponent -> MatDialog]: 
      StaticInjectorError(Platform: core)[UsertableComponent -> MatDialog]: 
        NullInjectorError: No provider for MatDialog!
        at _NullInjector.get (core.js:994)
        at resolveToken (core.js:1292)
        at tryResolveToken (core.js:1234)
        at StaticInjector.get (core.js:1102)
        at resolveToken (core.js:1292)
        at tryResolveToken (core.js:1234)
        at StaticInjector.get (core.js:1102)
        at resolveNgModuleDep (core.js:10837)
        at NgModuleRef_.get (core.js:12070)
        at resolveDep (core.js:12560)

文件userbtable.component.ts：

​

import { Component, OnInit, ViewChild, Inject } from '@angular/core';
import { UserService } from '../../services/user.service';
import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk/collections';
import { User } from '../../models/user.model';
import { MatPaginator, MatTableDataSource } from '@angular/material';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
  selector: 'usertable',
  templateUrl: './usertable.component.html',
  styleUrls: ['./usertable.component.scss']
})
export class UsertableComponent implements OnInit {

  dataSource = new MatTableDataSource(ELEMENT_DATA);
  displayedColumns = ['id', 'firstname', 'middlaname', 'lastname', 'email', 'phone', 'company', 'position', 'actions'];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  constructor(private UserService: UserService , public dialog: MatDialog) { }
  applyFilter(filterValue: string) {
    //debugger;
    console.log(this.dataSource);
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  openDialogEditUser(profilUser: string) {
    console.log('EDIT');
  }
  openDialogDeleteUser(profilUser: string) {
    console.log('DELETE');
  }

  ngOnInit() {
    let dataSource = new UserDataSource(this.UserService);
    console.log(this.UserService.getUser());
  }

  //@ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }
  
}

export class UserDataSource extends DataSource<any>{
  constructor(private UserService: UserService) {
    super();
  }
  connect(): Observable<User[]> {
    return this.UserService.getUser();
  }
  disconnect() { }
}


@Component({
  selector: 'dialog-add-user',
  templateUrl: './dialog-add-user.component.html',
})
export class DialogOverviewExample {

  animal: string;
  name: string;

  constructor(public dialog: MatDialog) { }

  openDialog() {
    debugger;
    let dialogRef = this.dialog.open(DialogAddUser, {
      width: '250px',
      data: { name: "this.name", animal: "this.animal" }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

}
export class DialogAddUser {

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

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

}

​

Answer 1

您正在UsertableComponent中注入一个MatDialog。检查您是否在父模块的提供者列表中(对于ex App.module.ts)或在您想要在其下创建实例的父组件(如AppComponent.ts)中正确地注册了它。