andrular输入框input监听值传递

news2024/11/6 4:21:49

效果图·:
在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2234049.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构——二叉树(续集)

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ 在上一篇博客我们…

动态规划 —— dp问题-按摩师

1. 按摩师 题目链接&#xff1a; 面试题 17.16. 按摩师 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/the-masseuse-lcci/description/ 2. 算法原理 状态表示&#xff1a;以某一个位置为结尾或者以某一个位置为起点 dp[i]表示&#xff1a;选择到i位置…

python爬取旅游攻略(1)

参考网址&#xff1a; https://blog.csdn.net/m0_61981943/article/details/131262987 导入相关库&#xff0c;用get请求方式请求网页方式&#xff1a; import requests import parsel import csv import time import random url fhttps://travel.qunar.com/travelbook/list.…

C++设计模式创建型模式———原型模式

文章目录 一、引言二、原型模式三、总结 一、引言 与工厂模式相同&#xff0c;原型模式&#xff08;Prototype&#xff09;也是创建型模式。原型模式通过一个对象&#xff08;原型对象&#xff09;克隆出多个一模一样的对象。实际上&#xff0c;该模式与其说是一种设计模式&am…

基于STM32的智能温室环境监测与控制系统设计(代码示例)

一、项目概述 在现代农业中&#xff0c;智能大棚能够通过环境监测、数据分析和自动控制等技术手段&#xff0c;实现对作物生长环境的精细化管理。本项目旨在设计一个基于STM32单片机的智能大棚系统&#xff0c;能够实时监测光照强度、空气温湿度及土壤湿度&#xff0c;并根据设…

(五)Web前端开发进阶2——AJAX

目录 1.Ajax概述 2.Axios库 3.认识URL 4.Axios常用请求方法 5.HTTP协议——请求报文/响应报文 6.HMLHttpRequest对象 7.前后端分离开发&#xff08;接口文档&#xff09; 8.Element组件库 1.Ajax概述 AJAX 是异步的 JavaScript和XML(Asynchronous JavaScript And XML)。…

进程信号——信号的保存

信号的概念 实际执行信号的处理动作称为信号递达(Delivery) 信号从产生到递达之间的状态,称为信号未决(Pending)。 进程可以选择阻塞 (Block )某个信号。 被阻塞的信号产生时将保持在未决状态,直到进程解除对此信号的阻塞,才执行递达的动作. 注意,阻塞和忽略是不同的,只要信号…

基于SSM的“房屋租赁系统”的设计与实现(源码+数据库+文档+PPT)

基于SSM的“房屋租赁系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SSM&#xff0c;JSP 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 房屋租赁系统首页 管理员后台管理页面 报告故障管…

无需懂代码!用AI工具Bolt一键生成网站的入门指南!

​ ​ 随着AI技术的不断发展&#xff0c;许多原本需要技术门槛的操作正在被大大简化&#xff0c;甚至零基础的用户也可以轻松实现。 例如&#xff0c;AI生成网站工具Bolt就是这样一个可以帮助我们快速创建、实时预览并自动部署网站的平台。接下来&#xff0c;本文将带你深入了…

Elasticsearch中时间字段格式用法详解

Elasticsearch中时间字段格式用法详解 攻城狮Jozz关注IP属地: 北京 2024.03.18 16:27:51字数 758阅读 2,571 Elasticsearch&#xff08;简称ES&#xff09;是一个基于Lucene构建的开源、分布式、RESTful搜索引擎。它提供了全文搜索、结构化搜索以及分析等功能&#xff0c;广泛…

vue中el-table显示文本过长提示

1.el-table设置轻提示:show-overflow-tooltip“true“&#xff0c;改变轻提示宽度

关于我的编程语言——C/C++——第四篇(深入1)

&#xff08;叠甲&#xff1a;如有侵权请联系&#xff0c;内容都是自己学习的总结&#xff0c;一定不全面&#xff0c;仅当互相交流&#xff08;轻点骂&#xff09;我也只是站在巨人肩膀上的一个小卡拉米&#xff0c;已老实&#xff0c;求放过&#xff09; 字符类型介绍 char…

【春秋云镜】CVE-2023-23752

目录 CVE-2023-23752漏洞细节漏洞利用示例修复建议 春秋云镜&#xff1a;解法一&#xff1a;解法二&#xff1a; CVE-2023-23752 是一个影响 Joomla CMS 的未授权路径遍历漏洞。该漏洞出现在 Joomla 4.0.0 至 4.2.7 版本中&#xff0c;允许未经认证的远程攻击者通过特定 API 端…

AI 写作(一):开启创作新纪元(1/10)

一、AI 写作&#xff1a;重塑创作格局 在当今数字化高速发展的时代&#xff0c;AI 写作正以惊人的速度重塑着创作格局。AI 写作在现代社会中占据着举足轻重的地位&#xff0c;发挥着不可替代的作用。 随着信息的爆炸式增长&#xff0c;人们对于内容的需求日益旺盛。AI 写作能够…

快速构建数据产品原型 —— 我用 VChart Figma 插件

快速构建数据产品原型 —— 我用 VChart Figma 插件 10 种图表类型、24 种内置模板类型、丰富的图表样式配置、自动生成图表实现代码。VChart Figma 插件的目标是提供 便捷好用 & 功能丰富 & 开发友好 的 figma 图表创建能力。目前 VChart 插件功能仍在持续更新中&…

源鲁杯 2024 web(部分)

[Round 1] Disal F12查看: f1ag_is_here.php 又F12可以发现图片提到了robots 访问robots.txt 得到flag.php<?php show_source(__FILE__); include("flag_is_so_beautiful.php"); $a$_POST[a]; $keypreg_match(/[a-zA-Z]{6}/,$a); $b$_REQUEST[b];if($a>99999…

【ArcGIS】绘制各省碳排放分布的中国地图

首先&#xff0c;准备好各省、自治区、直辖市及特别行政区&#xff08;包括九段线&#xff09;的shp文件&#xff1a; 通过百度网盘分享的文件&#xff1a;GS&#xff08;2022&#xff09;1873 链接&#xff1a;https://pan.baidu.com/s/1wq8-XM99LXG_P8q-jNgPJA 提取码&#…

C++《list的模拟实现》

在上一篇C《list》专题当中我们了解了STL当中list类当中的各个成员函数该如何使用&#xff0c;接下来在本篇当中我们将试着模拟实现list&#xff0c;在本篇当中我们将通过模拟实现list过程中深入理解list迭代器和之前学习的vector和string迭代器的不同&#xff0c;接下来就开始…

讲讲⾼可用的原则?

大家好&#xff0c;我是锋哥。今天分享关于【讲讲⾼可用的原则&#xff1f;】面试题。希望对大家有帮助&#xff1b; 讲讲⾼可用的原则&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在当今信息化时代&#xff0c;随着互联网技术的快速发展&#xff0…

003-Kotlin界面开发之声明式编程范式

概念本源 在界面程序开发中&#xff0c;有两个非常典型的编程范式&#xff1a;命令式编程和声明式编程。命令式编程是指通过编写一系列命令来描述程序的运行逻辑&#xff0c;而声明式编程则是通过编写一系列声明来描述程序的状态。在命令式编程中&#xff0c;程序员需要关心程…