Angular 5中Dialog无法打开求助：编译及运行时错误排查

Hey there! Let's work through this Dialog issue step by step—those errors usually boil down to missing imports or incorrect dependency setup, which is super common when starting out with Angular Material. Here's how to fix them:

1. First, Make Sure Your Module Has the Right Imports #

Angular Material components (like Dialog) need to be imported into the module where your DashboardComponent lives. If you skip this, the DI system won't recognize MatDialog, leading to those undefined errors.

Update your module file (e.g., dashboard.module.ts):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';
// Import required Material modules
import { MatDialogModule } from '@angular/material/dialog';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// Import your custom dialog component (if you have one)
import { YourDialogComponent } from './your-dialog/your-dialog.component';

@NgModule({
  declarations: [
    DashboardComponent,
    YourDialogComponent // Declare your dialog component here
  ],
  imports: [
    CommonModule,
    MatDialogModule, // This makes MatDialog available to components in the module
    BrowserAnimationsModule // Required for Angular Material animations to work
  ],
  entryComponents: [
    YourDialogComponent // Angular 5 needs this for dynamically created components like dialogs
  ]
})
export class DashboardModule { }

2. Correctly Inject MatDialog into Your DashboardComponent #

The TS2339 error means TypeScript doesn't recognize the dialog property on your component. Fix this by properly injecting MatDialog via the constructor, and importing the class first.

Update dashboard.component.ts:

import { Component } from '@angular/core';
// Import the MatDialog class
import { MatDialog } from '@angular/material/dialog';
// Import your dialog component
import { YourDialogComponent } from './your-dialog/your-dialog.component';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent {

  // Inject MatDialog here—this creates the `dialog` property you'll use
  constructor(public dialog: MatDialog) { }

  // Method to trigger the dialog on button click
  openDialog(): void {
    const dialogRef = this.dialog.open(YourDialogComponent, {
      width: '300px',
      data: { message: 'Hello from the dashboard!' } // Optional: pass data to the dialog
    });

    // Optional: handle dialog close events
    dialogRef.afterClosed().subscribe(result => {
      console.log('Dialog closed with result:', result);
    });
  }
}

3. Check Your Template Button Binding #

Make sure your button in dashboard.component.html is correctly calling the openDialog method:

<button mat-raised-button (click)="openDialog()">Open Dialog</button>

Why You Were Getting Those Errors #

• TS2339: property 'dialog' does not exist on type DashboardComponent: Either you didn't inject MatDialog in the component's constructor, forgot to import the MatDialog class, or didn't add MatDialogModule to your module's imports.
• Cannot read property 'open' of undefined: This happens when this.dialog is undefined—usually because the DI system couldn't provide the MatDialog service (again, missing MatDialogModule in your module) or you made a typo in the property name.

Quick Extra Check #

Ensure your Angular Material and CDK versions are compatible with Angular 5. Angular 5 requires version 5.x of these packages. If you installed the latest versions by mistake, roll back with:

npm install @angular/material@5.x @angular/cdk@5.x --save

内容的提问来源于stack exchange，提问作者ChinnaR