在Angular中弹出并从PopUP获取值

<h2>PopUP</h2>
<input type="text" [(ngModel)]="inputValue">
<button (click)="confirm()">Confirm</button>

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { PopUpComponent } from './pop-up/pop-up.component';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="openPopUp()">Open PopUP</button>
  `,
})
export class AppComponent {
  constructor(private dialog: MatDialog) {}

  openPopUp(): void {
    const dialogRef = this.dialog.open(PopUpComponent);

    dialogRef.afterClosed().subscribe((result) => {
      console.log('Dialog closed:', result);
      // 处理获取到的值
    });
  }
}

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-pop-up',
  templateUrl: './pop-up.component.html',
})
export class PopUpComponent {
  inputValue: string;

  constructor(public dialogRef: MatDialogRef<PopUpComponent>) {}

  confirm(): void {
    this.dialogRef.close(this.inputValue);
  }
}