角度材质MatDialog不适用于Angular-6

Question

我是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;
    });
  }

谢谢

Answer 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的工作版本