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

问题描述

我试图在我的项目中添加一个基本的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的构造函数中存在某些内容时，运行程序时的外观就是这样。

如您所见，在构造函数中包含某些内容可以摆脱页面上的所有内容，这对我来说没有意义，因为它删除了标头，该标头是与Cardbox完全分开的组件。我已尽一切努力使其正常工作，但仍然无法正常工作。

为什么要触摸构造函数使整个项目空白？我忘记添加到其他文件了吗？以及如何以一种可行的方式向项目添加MatDialog弹出功能？

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

仍在寻找答案：（

解决方法

您使用错了。
我很惊讶您的应用在执行 <behaviors> <endpointBehaviors> <behavior name="MyServiceAspNetAjaxBehavior"> <webHttp /> </behavior> </endpointBehaviors> <serviceBehaviors> <behavior name="MyServiceBehavior"> <serviceMetadata httpGetEnabled="true"/> </behavior> </serviceBehaviors> </behaviors> <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" /> <services> <service name="MyService" behaviorConfiguration="MyServiceBehavior"> <endpoint address="" behaviorConfiguration="MyServiceAspNetAjaxBehavior" binding="webHttpBinding" contract="MyService" /> </service> </services> </system.serviceModel> 时会编译
您需要做的是，首先创建对话框组件。
为了使事情变得简单，您可以在CardBox组件的同一文件中创建它，但请确保将其放在CardBox类之外：

cardboxes.component.ts

this.dialog.open(CardBoxComponent)

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

dialog-overview-example-dialog.html

@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();
  }
}

最后，将<h1 mat-dialog-title>more info</h1> <div mat-dialog-content> <p>{{data.info}}</p> </div> 函数添加到CardBox组件内的ts文件中：

cardboxes.component.ts

openDialog(myInfo)

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

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

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