您可以向Angular中的现有组件添加“模态”对话框吗？

问题描述

我有一个纸牌元素，里面有一张图片。

HTML

<mat-card id="CARDBox">
       <img class="logo" src="path/image.jpg" alt="image" height=25px/>
</mat-card> 

TS

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

  constructor() { }

  ngOnInit(): void {}

}

我想要它，以便通过单击图像来打开一个Mat对话框，其中包含有关图像的更多信息。是否可以通过添加到我现有的CardBox组件来做到这一点？我知道我需要一个openDialog（）方法，但不确定如何将其实现到现有的ts组件中。

解决方法

很简单，只需添加点击事件 HTML

<mat-card id="CARDBOX" (click)="openDialog()">
   <img class="logo" src="path/image.jpg" alt="image" height=25px/>
</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);
  }
}

您将来可能会遇到此问题，我建议您为此使用其他组件。 CardBoxDialog。然后在HTML模板中的此组件上添加

<app-cardbox></app-cardbox>