Question

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

我遵循了该指示，但是对我来说MatDialog-Overview

不起作用

有人知道如何正确使用MatDialog吗？

我的代码

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

Angular Material MatDialog不适用于Angular-6

1 个答案: