Angular 5.0 静态注入器错误答案

【问题标题】：Angular 5.0 StaticInjectorErrorAngular 5.0 静态注入器错误
【发布时间】：2018-02-06 04:33:47
【问题描述】：

我试图打开对话框。当我按下按钮但出现此错误时：

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();
  }

}

【问题讨论】：

app.module.ts
显示你的模块。看来您错过了模块导入
从 '@angular/platform-browser' 导入 { BrowserModule }；从'@angular/core'导入{ NgModule }；从'./app.component'导入{AppComponent}；从 './components/usertable/usertable.component' 导入 { UsertableComponent,DialogAddUser };从“@angular/material”导入 { MatTableModule, MatInputModule }；从“@angular/common/http”导入 { HttpClientModule }；从'./services/user.service'导入{用户服务}；从'@angular/platform-browser/animations'导入{BrowserAnimationsModule}；
从 '@angular/forms' 导入 {FormsModule, ReactiveFormsModule}；从“@angular/material”导入 { MatPaginatorModule }；从“@angular/material”导入 { MatIconModule}；从'@angular/material/button'导入{MatButtonModule}；
声明：[AppComponent，UsertableComponent]，导入：[BrowserModule，MatTableModule，HttpClientModule，MatInputModule，BrowserAnimationsModule，ReactiveFormsModule，FormsModule，MatPaginatorModule，MatIconModule，MatButtonModule]，提供者：[UserService]，引导程序：[AppComponent ]

标签： javascript angular angular-material-5

【解决方案1】：

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

【讨论】：