效果图·：

step1: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.html
<button mat-button (click)=“openDialog()”>Open dialog

step2: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.ts

import {Component, inject} from '@angular/core';
import {MatButton, MatButtonModule} from '@angular/material/button';
import {MatDialog, MatDialogModule} from '@angular/material/dialog';
import {DialogContentExampleDialog} from './DialogContentExampleDialog';
import {async} from 'rxjs';@Component({selector: 'app-apple',standalone: true,imports: [MatButton, MatButtonModule, MatDialogModule],templateUrl: './apple.component.html',styleUrl: './apple.component.css'
})
export class AppleComponent {readonly dialog = inject(MatDialog);openDialog() {// const dialogRef = this.dialog.open(DialogContentExampleDialog);const dialogRef = this.dialog.open(DialogContentExampleDialog, {data: {url:'https://www.baidu.com',id:101},maxWidth: '100vw',panelClass: 'full-width-dialog',});/*
*     dialogRef.afterClosed().subscribe(async (result: AddMediaDialogData) => {if (!result || !result.url) {return;}
* */dialogRef.afterClosed().subscribe(result => {console.log(`Dialog result: ${result}`);});}}

step3: E:\projectgood\ajnine\untitled4\src\app\apple\dialog-content-example-dialog.html

<p style="width: 900px;" mat-dialog-title>商品修改</p>
<p style="margin-left: 20px;">{{ this.data.id }}</p><mat-form-field style="margin-left: 20px;margin-top: 10px;margin-right: 20px"><input matInput placeholder="请输入position" [(ngModel)]="dialogData.position">
</mat-form-field>
<mat-form-field style="margin-left: 20px;margin-right: 20px"><input matInput placeholder="请输入name" [(ngModel)]="dialogData.name">
</mat-form-field>
<mat-form-field style="margin-left: 20px;margin-right: 20px"><input matInput placeholder="请输入icon" [(ngModel)]="dialogData.icon">
</mat-form-field>
<mat-form-field style="margin-left: 20px;margin-right: 20px"><input matInput placeholder="请输入phone" [(ngModel)]="dialogData.phone">
</mat-form-field>
<mat-form-field style="margin-left: 20px;margin-right: 20px"><input matInput placeholder="请输入address" [(ngModel)]="dialogData.address">
</mat-form-field><button style="margin-left:20px;background: red;color: white;margin-bottom: 10px;width: 120px;" mat-button (click)="getLoginClick('测试数据456')">登录</button><button mat-flat-button [mat-dialog-close]="this.dialogData" color="primary">Add</button>

step4: E:\projectgood\ajnine\untitled4\src\app\apple\DialogContentExampleDialog.ts

import {ChangeDetectionStrategy, Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
import {MatButtonModule} from '@angular/material/button';
import {FormsModule} from '@angular/forms';
import {MatFormField} from '@angular/material/form-field';
import {MatInput} from '@angular/material/input';@Component({selector: 'dialog-content-example-dialog',templateUrl: 'dialog-content-example-dialog.html',standalone: true,imports: [MatDialogModule, MatButtonModule, FormsModule, MatFormField, MatInput],changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DialogContentExampleDialog implements OnInit{cancelString :string=''sureString :string=''testString :string=''todos: Todo[] = [];/** {"position": "772024102801","name": "雨林","icon": "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg","phone": "13952141236","address": "成都市双流区华阳时代广场a栋701室"}* */dialogData: Todo = {position: '772024102801', name: '雨林', icon: 'http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg', phone: '13952141236', address: '成都市双流区华阳时代广场a栋701室'};protected readonly names = names;constructor(public dialogRef: MatDialogRef<AddMediaDialogData>, @Inject(MAT_DIALOG_DATA) public data: AddMediaDialogData) {}getClick(name: string) {console.log('you click this button')console.log(name)names = name}getLoginClick(name: string) {console.log(this.dialogData.position)console.log(this.dialogData.name)console.log(this.dialogData.icon)console.log(this.dialogData.phone)console.log(this.dialogData.address)console.log(this.data.id)this.dialogRef.close();}animal() {return names}ngOnInit(): void {this.cancelString="鲨鱼哟"this.sureString="昊昊超体"this.testString="测试超体"}onNoClick(): void {console.log(this.data.url)// this.data.url = '';this.dialogRef.close();}}export interface AddMediaDialogData {url: string;id: number;
}var names = ''interface Todo {position: string;name: string;icon: string;phone: string;address: string;
}/*
{"position": "772024102801","name": "雨林","icon": "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg","phone": "13952141236","address": "成都市双流区华阳时代广场a栋701室"}一共五个输入内容输入位置输入名称输入icon输入phone输入地址
* */

end