问题描述
我有一个纸牌元素,里面有一张图片。
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>