andrular输入框input监听值传递

效果图·：

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

javascript 复制代码

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

xml 复制代码

<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

typescript 复制代码

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