在 Angular 中添加组件构造函数会使整个页面 return 空白？

Question

我正在尝试将基本的 MatDialog 添加到我的项目中。在该项目中，我有 2 个组件，一个 header 用于页面，另一个称为“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>

但是，这样做会从页面中删除除背景之外的所有内容，包括 header 组件。这就是当 Cardbox 的构造函数中有一些内容时程序为运行时的样子。

如您所见，在构造函数中添加某些内容会删除页面上的所有内容，这对我来说没有任何意义，因为它删除了 header，它是一个完全独立于 cardbox 的组件。我已尽一切努力使其正常工作，但仍然无法正常工作。

为什么一碰构造函数就让整个工程一片空白？有没有我忘记添加到另一个文件的东西？以及如何以有效的方式向项目添加 MatDialog 弹出功能？

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

仍在寻求答案:(

Answer 1

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

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-overview-example-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>

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

在 Angular 中添加组件构造函数会使整个页面 return 空白？

Adding to component constructor in Angular makes the entire page return blank?

html

dialog

modal-dialog

angular

mat-dialog