如何使用angular从html制作弹出/查看功能

ng new project-name

ng generate component popup

<!-- 弹出/查看按钮 -->
<button (click)="openPopup()">弹出/查看</button>

<!-- 弹出/查看模态框 -->
<div class="modal" [ngClass]="{'show': isPopupOpen}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">弹出/查看功能</h5>
        <button type="button" class="close" (click)="closePopup()">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 弹出/查看内容 -->
        <p>这是弹出/查看功能的内容。</p>
      </div>
    </div>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent {
  isPopupOpen: boolean = false;

  openPopup() {
    this.isPopupOpen = true;
  }

  closePopup() {
    this.isPopupOpen = false;
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { PopupComponent } from './popup/popup.component';

@NgModule({
  declarations: [
    AppComponent,
    PopupComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<app-popup></app-popup>

ng serve