效果图·:
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