html - 你能在 Angular 的现有组件中添加一个模态对话框吗？

Question

我有一个 mat-card 元素，里面有一个图像。

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 组件中。

Answer 1

它很简单，只需添加点击事件 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);
  }
}

将来您可能会遇到此问题，我建议为此使用另一个组件。卡片框对话框。然后在 HTML 模板中的这个组件上添加

<app-cardbox></app-cardbox>