时间戳

首页 > 解决方案 > 向构造函数添加模态对话框可以消除页面上的所有其他内容

html - 向构造函数添加模态对话框可以消除页面上的所有其他内容

问题描述

我正在尝试添加一个基本的模式对话框以在单击图像时弹出。我的代码如下：

HTML

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

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

当我向构造函数添加任何内容时，页面上的所有内容都在删除，什么都没有显示。我只想要一种简单的方法来添加弹出对话框而不制作新组件。我做错了什么，有没有办法做到这一点？

标签： htmlangulartypescriptdialogmodal-dialog

解决方案

请尝试将其与其他选项一起用作第二个参数。

this.dialog.open(UserProfileComponent, { height: '400px', width: '600px', });

推荐阅读