如何在HTML按钮上打开/显示组件单击- Angular

<button (click)="openComponent()">打开组件</button>

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { YourComponent } from '路径/到/你的组件';

@Component({
  selector: 'app-your-button-component',
  templateUrl: './your-button-component.component.html',
  styleUrls: ['./your-button-component.component.css']
})
export class YourButtonComponent implements OnInit {

  constructor(private dialog: MatDialog) { }

  ngOnInit(): void {
  }

  openComponent(): void {
    const dialogRef = this.dialog.open(YourComponent, {
      width: '500px',
      height: '300px',
      // 可以根据需要设置弹出框的宽度和高度
    });
  }

}

<app-your-button-component></app-your-button-component>