1

我正在尝试将一个基本的 MatDialog 添加到我的项目中。在项目中，我有 2 个组件，一个页面标题和另一个名为“CardBox”的组件，它基本上只包含指向不同网站的链接的卡片盒。
当您单击“i”图标时，我想打开一个包含更多信息的对话框。
见下图。目前的样子

最初，我的理解是我只是在 Cardbox 组件的构造函数中添加了一个 MatDialog 字段。像这样：

cardboxes.component.html

<mat-card id="CARDBOX">
   <img class="info" src="path/image.jpg" alt="image" height=25px (click)="openDialog()"/>
</mat-card>

cardboxes.component.ts

@Component({
  selector: 'app-cardbox',
  templateUrl: './cardbox.component.html',
  styleUrls: ['./cardbox.component.scss']
})
export class CardboxComponent implements OnInit {

  constructor(private dialog: MatDialog) { }

  ngOnInit(): void {}

  openDialog() {
   this.dialog.open(CardBoxComponent);
  }
}

（我知道这是调用它自己的组件，并且会再次打开相同的东西。我只是想让它先工作。）

app.component.html

<div id="bg">
    <app-header></app-header>
    <br>
    <app-cardbox></app-cardbox>
</div>

但是，这样做会从页面中删除除背景之外的所有内容，包括标题组件。这是在 Cardbox 的构造函数中有 SOMETHING 时程序运行时的样子。当构造函数中有东西时会发生什么

如您所见，构造函数中的某些内容会删除页面上的所有内容，这对我来说没有意义，因为它删除了标题，这是与卡片箱完全分开的组件。我已经尝试了一切以使其正常工作，但仍然无法正常工作。

为什么触摸构造函数会使整个项目空白？有什么我忘了添加到另一个文件吗？以及如何以有效的方式将 MatDialog 弹出功能添加到项目中？

TLDR：当我在其中一个组件的构造函数中放入任何内容时，整个页面都会消失。我该如何解决这个问题？

仍在寻求答案:(

4

1 回答 1

1

你用错了。
我很惊讶你的应用程序编译时this.dialog.open(CardBoxComponent)
你需要做的是，首先创建你的对话框组件。
为简单起见，您可以在与 CardBox 组件相同的文件中创建它，但请确保将其放在 CardBox 类之外：

cardboxes.component.ts

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    // data is gonna be the data you pass to dialog when you open it from CardBox
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

然后为对话框组件创建一个模板：

对话框概述示例-dialog.html

<h1 mat-dialog-title>more info</h1>
<div mat-dialog-content>
  <p>{{data.info}}</p>
</div>

最后openDialog(myInfo)，您在 CardBox 组件内的 ts 文件中添加函数：

cardboxes.component.ts

  openDialog(myInfo): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      // data you pass to your dialog
      data: {info: myInfo}
    });

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

并将其添加到您的模板中：

cardboxes.component.ts

<mat-card id="CARDBOX">
   <img class="info" src="path/image.jpg" alt="image" height=25px (click)="openDialog('info about first site')"/>
</mat-card>

在此示例中，我将信息作为文本传递，但它也可以是对象。
这是一个让您更轻松的演示：链接

于 2020-10-12T19:12:27.573 回答