Angular Material MatDialog 不适用于 Angular-6答案

【问题标题】：Angular Material MatDialog Not work for Angular-6Angular Material MatDialog 不适用于 Angular-6
【发布时间】：2018-09-17 09:16:22
【问题描述】：

我是 Angular/Angular 材料的初学者，我尝试使用 MatDialog

我遵循了那个指令，但它对我不起作用MatDialog-Overview

有人知道MatDialog的正确用法吗？

stackblitz code here

我的代码

   <!--Add new button-->
    <div class="d-flex flex-row-reverse bd-highlight">
      <div class="p-2 bd-highlight"><button mat-flat-button class="btn-sg"  color="primary"  style=" width:200px; color: white " (click)="openDialog()" >+ Add New</button></div>
    </div>
    <!--/ End Add new button-->

.ts

import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';


 openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: {name: this.name, animal: this.animal}
    });

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

谢谢

【问题讨论】：

您是否导入了所需的模块？你得到的错误是什么？如果可能，请创建一个堆栈闪电战。
是的，先生，好的，将更新 stackblitz 实时代码部分
您好 core114 我看到您已经得到了您的问题的答案，让我告诉您，使用 Angular CLI 为您生成基本代码（如组件、服务等）是一种很好的做法。像这样，您可以保持代码干净、可维护，并且不会错过基本结构或您的（管道、指令、组件、服务）！
如果您发出以下命令，请在您的 Angular 控制台上问好：ng g c nameOfComponent Angular 将为您生成文件。 ng g ( 表示生成 ) C , 表示组件。您也可以制作 ng g s nameOfService 。在此之后，您只需要导入您需要的内容并制作您的代码:)
没问题，希望对你有用！干杯！！

标签： angular angular-material

【解决方案1】：

您的 stackblitz 缺少对话框组件类。

import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'Dialogpge',
  templateUrl: 'Dialogpge.html',
})
export class Dialogpge {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
}

拥有这个并将其导入 main.ts 和 dialog-overview-example.ts 文件。

Here (https://stackblitz.com/edit/angular-hxh2vi-unhrrq) 是 stackblitz 的工作版本，从你的版本分叉出来

【讨论】：