angular实现dialog弹窗

说明:
angular实现dialog弹窗
效果图:

step1:E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.html

<button mat-button (click)="openDialog()">Open dialog</button>

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';@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);dialogRef.afterClosed().subscribe(result => {console.log(`Dialog result: ${result}`);});}}

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

<h2 mat-dialog-title>Install Angular</h2>
<mat-dialog-content class="mat-typography"><h3>Develop across all platforms</h3><p>{{ cancelString }}</p><p>{{ sureString }}</p>
</mat-dialog-content>
<mat-dialog-actions align="end"><button mat-button [mat-dialog-close]="cancelString">Cancel</button><button mat-button [mat-dialog-close]="sureString">Install</button>
</mat-dialog-actions>

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

import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
import {MatDialogModule} from '@angular/material/dialog';
import {MatButtonModule} from '@angular/material/button';@Component({selector: 'dialog-content-example-dialog',templateUrl: 'dialog-content-example-dialog.html',standalone: true,imports: [MatDialogModule, MatButtonModule],changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DialogContentExampleDialog implements OnInit{cancelString :string=''sureString :string=''ngOnInit(): void {this.cancelString="鲨鱼哟"this.sureString="昊昊超体"}}

end

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

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

相关文章

《JVM第4课》程序计数器

无痛快速学习入门JVM&#xff0c;欢迎订阅本免费专栏 Java程序计数器&#xff08;Program Counter Register&#xff09;是Java虚拟机&#xff08;JVM&#xff09;运行数据区的一个组成部分。每个线程都有它自己的程序计数器&#xff0c;这部分内存用于存储该线程下一条要执行的…

闪存学习_1:Flash-Aware Computing from Jihong Kim

闪存学习_1&#xff1a;Flash-Aware Computing from Jihong Kim 前言一、Storage Media&#xff1a;NAND Flash Memory1、概念2、编程和擦除操作3、读操作4、异地更新操作&#xff08;Out-Place Update&#xff09;5、数据可靠性6、闪存控制器&#xff08;SSD主控&#xff09;7…

嵌入式web开发:boa、lighttpd

嵌入式web开发&#xff1a;boa、lighttpd https://blog.csdn.net/m0_37105371/category_10937068.html BOA服务器的移植-CSDN博客 【第1部分&#xff1a;boa服务器部署到ubuntu里】 http://www.boa.org/boa-0.94.13.tar.gz tar xvzf boa-0.94.13.tar.gz cd boa-0.94.13/src/ a…

使用模板工厂模式实现动态创建C++对象

一、前言 在现代C开发中&#xff0c;工厂模式是常见的设计模式之一&#xff0c;能够有效地解耦对象创建与使用代码。本文介绍一个模板类 ComponentsFactory&#xff0c;它运用了模板编程和工厂模式&#xff0c;实现了一种动态的对象创建方式。通过该工厂&#xff0c;我们可以基…

Linux_04 Linux常用命令——tar

一、命令格式 tar [选项] [归档文件] [要处理的文件或目录]1、选项 c创建归档文件x解压缩归档文件z使用gzipj使用bzip2v处理过程显示信息f指定归档文件名称 2、归档文件-可指定目录及文件名 /home/wang.tar.gz 3、要处理的文件或目录 /home/study1/wang 二、常见命令 t…

【1个月速成Java】基于Android平台开发个人记账app学习日记——第一天

24.10.31 开发前准备 IDE下载与配置GitHub仓库创建 IDE下载与配置 下载最新版本IDEA&#xff0c;卸载之前的旧版本 后面一路跟着安装的默认选项走即可 安装完以后这个最新的可以把我再jetbrains的其他软件设置导入&#xff0c;很方便 接下来创建新的项目并进行安卓应用开发…

【elkb】索引生命周期管理

索引生命周期管理 Index lifecycle management(索引生命周期管理)是elasticsearch提供的一种用于自动管理索引的生命周期的功能。允许使用者定义索引的各个阶段&#xff0c;从创建至删除。并允许使用者在每个阶段定义索引需要执行的特定动作。这些动作包含索引创建&#xff0c…

HttpServer模块 --- 封装TcpServer支持Http协议

目录 模块设计思想 模块代码实现 模块设计思想 本模块就是设计一个HttpServer模块&#xff0c;提供便携的搭建http协议的服务器的方法。 那么这个模块需要如何设计呢&#xff1f; 这还需要从Http请求说起。 首先http请求是分为静态资源请求和功能性请求的。 静态资源请求…

外接数据库给streamlit等web APP带来的变化

之前我采用sreamlit制作了一个调查问卷的APP&#xff0c; 又使用MongoDB作为外部数据存储&#xff0c;隐约觉得外部数据库对于web APP具有多方面的意义&#xff0c;代表了web APP发展的趋势之一&#xff0c;似乎是作为对这种趋势的响应&#xff0c;streamlit官方近期开发了st.c…

sql题库中常见问答

一.解答题 (15*2) 1 Drop, delete,truncates 三者的区别? ①、drop和truncate属于数据库的定义语言(DDL) ②、delete属于数据库的操作语言(DML) ③、drop可以删除全表结果,且删除的同时会删除表数据 ④、delete 和truncate只能删除表数据,truncate会删除表数据一起…

黄山谷捷IPO拟募资5亿元,增强核心竞争力

根据深交所发行上市审核进度&#xff0c;10月28日&#xff0c;黄山谷捷股份有限公司首发申请审核状态变更为“提交注册”。据悉&#xff0c;黄山谷捷本次拟公开发行不超过2,000万股&#xff0c;占本次发行后总股本的比例不低于25.00%。 招股书&#xff08;注册稿&#xff09;披…

无人机拦截捕获/直接摧毁算法详解!

一、无人机拦截捕获算法 网捕技术 原理&#xff1a;抛撒特殊设计的网具&#xff0c;捕获并固定无人机。 特点&#xff1a; 适用于小型无人机。 对无人机的损害较小&#xff0c;基本不影响其后续使用。 捕获成功率较高&#xff0c;且成本相对较低。 应用实例&#xff1a;…

.NET Core WebApi第4讲:控制器、路由

一、控制器是什么&#xff1f; 1、创建一个空的API控制器&#xff1a;TestController.cs 2、里面有一个类叫TestController&#xff0c;把它叫做控制器 因为它继承了ControllerBase类&#xff0c;ControllerBase类里提供了一系列的方法&#xff0c;使得TestController这个类具…

WAF+AI结合,雷池社区版的强大防守能力

网上攻击无处不不在&#xff0c;为了保护我自己的网站&#xff0c;搜索安装了一个开源免费的WAF 刚安装完成就收到了海外的攻击&#xff0c;看到是海外的自动化攻击工具做的 雷池刚好也有AI分析&#xff0c;于是就尝试使用这个功能&#xff0c;看看这个ai能力到底怎么样 以下…

Python批量查找包含多个关键词的PDF文件

在信息爆炸的时代&#xff0c;数据管理变得愈发重要。U盘作为一种便携式存储设备&#xff0c;常常承载着我们大量的个人和工作数据。然而&#xff0c;随着文件数量的增加&#xff0c;在U盘中快速找到特定文件常常成为一个令人头疼的难题。我们通常可以采用everything来快速查找…

Chromium HTML5 新的 Input 类型tel对应c++

一、Input 类型: tel <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>test</title> </head> <body><form action"demo-form.php">电话号码: <input type"tel" name…

cisco网络安全技术第4章测试及考试

测试 以下 ACE 将放置在何处&#xff1f; permit icmp any any nd-na 试题 1选择一项&#xff1a; 在连接到另一个路由器并已启用 IPv6 的路由器接口上 使用下一代防火墙而不是状态防火墙的一个好处是什么&#xff1f; 试题 2选择一项&#xff1a; 主动而不是被动防护互…

【SQL】SQL函数

&#x1f4e2; 前言 函数 是指一段可以直接被另一段程序调用的程序或代码。主要包括了以下4中类型的函数。 字符串函数数值函数日期函数流程函数 &#x1f384; 字符串函数 ⭐ 常用函数 函数 功能 CONCAT(S1,S2,...Sn) 字符串拼接&#xff0c;将S1&#xff0c;S2&#xff0…

Springboot 整合 Java DL4J 构建自然语言处理之机器翻译系统

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

第三份代码:VoxelNet的pytorch实现

VoxelNet是点云体素化处理的最开始的网络结构设计&#xff0c;通过完全弄明白整个VoxelNet的pytorch实现是非常有必要的。 参考的代码是这一份&#xff1a;GitHub - RPFey/voxelnet_pytorch: modification of voxelnet 参考文章&#xff1a;VoxelNet论文解读和代码解析_voxel…