时间戳

首页 > 解决方案 > Angular Material MatDialog 不适用于 Angular-6

angular - Angular Material MatDialog 不适用于 Angular-6

问题描述

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

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

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

stackblitz代码在这里

我的代码

   <!--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;
    });
  }

谢谢

标签： angularangular-material

解决方案

您的 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 文件。

这里（https://stackblitz.com/edit/angular-hxh2vi-unhrrq）是从您的版本分叉的 stackblitz 的工作版本

推荐阅读