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。 檢查是否已在要創建其實例的父模塊（例如，App.module.ts）的父列表或父組件（例如AppComponent.ts）的提供者列表中正確注冊了它。