Question

刚刚开始构建Angular应用程序。我正在写一本小型图书库存应用。我在材料模块中遇到对话框组件时遇到问题。我已经访问了Angular材料网站来检查我的实现，但仍未能使其按预期运行。我在 snackbar组件中遇到类似问题。想知道是否有人之前遇到过这个问题。谢谢你的帮助！

app.Module.ts

import {MatDialogModule } from '@angular/material/dialog';

imports:[MatDialogModule]

collection.component.ts

import {MatDialogModule, MatDialogRef } from '@angular/material/dialog';

bookDetailDialogRef: MatDialogRef<BookDetailComponent>;

constructor(private dataService: DataService, private snackBar: MatSnackBarModule,
              private _dialog: MatDialogModule, private _router: Router){}

openDialog(bookId: number): void{
    let config = {with: '650px', height: '400px', position: {top: '50px'}};
    let dialogRef = this._dialog.open(this.bookDetailDialogRef, config);
    dialogRef.componentInstance.bookId = bookId;
    dialogRef.afterClosed().subscribe(res => {this.getBooks();});
  }

collection.component.html

<button mat-button (click)="openDialog(book.id)"><i class="material-icons">
              pageview</i> Dialog</button>

Answer 1

_dialog的类型为 MatDialog 而非 MatDialogModule ，并将 MatSnackBarModule 更改为 MatSnackBar 。在构造函数中将其更改为，

constructor(private dataService: DataService, private snackBar: MatSnackBarModule,
              private _dialog: MatDialog, private _router: Router){}

Answer 2

用MatDialogModule替换MatDialog

constructor(

public dialog: MatDialog

)

'MatDialogModule'类型中不存在属性'open'

2 个答案: