Angular的Ng-Zorro组件库通知提醒框知识点

news2024/11/22 18:46:58

目录

系列文章目录

一、在angular中引入通知提醒框服务

二、创建通知提醒框


提示:在实际操作中根据id移除通知提醒框的方法尚未熟悉,根据此文档进行巩固

一、在angular中引入通知提醒框服务

  constructor(
        private notifition: NzNotificationService
    ) {}

二、创建通知提醒框

示例图:

html:

 <button
 nz-button
 (click)="personList.onFinish(boxTemplate)"
 nzType="primary" >
       <span>弹出提醒框</span>
 </button> 



<!-- 弹出提示 -->
<ng-template #boxTemplate let-notification let-info="data">
    <div class="ant-notification-notice-content">
        <div class="ant-notification-notice-with-icon">
            <span class="ant-notification-notice-icon">
                <i nz-icon nzType="smile" style="color: rgb(16, 142, 233)"></i>
            </span>
            <div class="ant-notification-notice-message">系统提示:</div>
            <div class="ant-notification-notice-description">xxx</div>

            <span class="ant-notification-notice-btn">
                    <button
                        nz-button
                        nzType="primary"
                        class="mg_l_10"
                    >
                        确定
                    </button>
            </span>
        </div>
    </div>
</ng-template>

ts: 

 personList={
        onUpload: () => {
           //根据id调用remove方法移除
            this.notifition.remove(this.personList.notifition.messageId);
        },
        notifition: null,
        onFinish: (template: TemplateRef<{}>) => {
            this.personList.notifition = this.notifition.template(template, {
                nzDuration: 0,
            });
        },
}

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

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

相关文章

pip 安装软件出现 [No space left on device]

问题&#xff1a; /home文件下空间满了&#xff0c;安装软件可能会出现这个问题 解决方法&#xff1a; pip install --no-cache-dir 安装包名

跨链原子交换

原子交换的想法于 2013 年首次在 BitcoinTalk 论坛上提出&#xff0c;它可以实现两个区块链之间的代币交换。 这些交换是原子的&#xff0c;因为双方要么收到对方的硬币&#xff0c;要么都保留自己的硬币。 一方不可能欺骗另一方。 它不依赖任何可信赖的第三方&#xff0c;消除…

TOD和PPS精确时间同步技术

介绍 PPS和TOD PPS和TOD是两种用于精确时间同步的技术&#xff0c;它们在许多领域都有广泛的应用&#xff0c;总的来说&#xff0c;PPS和TOD被广泛应用于各种需要高度精确时间同步的领域&#xff0c;包括通信、测量、测试、系统集成和计算机网络等。 一、PPS PPS&#xff08…

HCIP-十二、BGP常用属性

十二、BGP常用属性 实验拓扑实验需求及解法1.IP 地址已配置&#xff0c;自行测试直连。2.AS100 中运行 OSPF3.AS200 中运行 ISIS4.运行 BGP5.发布 BGP 路由6.修改起源属性 Origin7.修改 AS-path8.修改本地优先 Local-preference9.修改 MED 实验拓扑 实验需求及解法 本实验模拟…

java编程:数组代表着苹果期货在 9 天内的价格变化,其中第 n 个元素是苹果在第 n 天的 价格,你可以进行最多三次交易,设计算法,9 天内赚到最多的钱

1 题目 编程题&#xff1a;下面的数组代表着苹果期货在 9 天内的价格变化&#xff0c;其中第 n 个元素是苹果在第 n 天的 价格&#xff0c;你可以进行最多三次交易&#xff0c;设计一个算法&#xff0c;9 天内如何赚到最多的钱&#xff1f;价格数组&#xff1a; [8, 9, 2, 5, …

SSM训练营管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 训练营管理系统是一套完善的信息系统&#xff0c;结合springMVC框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系 统主要采用B/S模…

【EasyExcel实践】导出多个sheet到多个excel文件,并压缩到一个zip文件

文章目录 前言正文一、项目依赖二、封装表格实体和Sheet实体2.1 表格实体2.2 Sheet实体 三、核心实现3.1 核心实现之导出为输出流3.2 web导出3.3 导出为字节数组 四、调试4.1 构建调试用的实体类4.2 控制器调用4.3 测试结果 五、注册大数转换器&#xff0c;长度大于15时&#x…

台灯哪种灯光对眼睛好?精选高品质的护眼台灯

近几年越来越多家长开始重视孩子的视力健康问题&#xff0c;要知道如今我国儿童青少年的近视率已经达到了52.7%&#xff0c;也就是说平均每十个儿童青少年中就有五个是存在视力问题的&#xff0c;而且近视的人群是越往高年级的学生占比越多。不过目前也发现了不少低年级的孩子出…

不要被各种专业术语吓倒

有一个东西&#xff0c;是如此奇妙&#xff0c;今天我们需要讲讲。 在不同的函数中&#xff0c;这个东西有着不同的名字&#xff0c;但实际它都是同一个东西。 例如&#xff0c; RegisterWaitForSingleObject 这个 API&#xff0c;它的原型如下&#xff1a; BOOL RegisterWai…

Maven——坐标和依赖

Maven的一大功能是管理项目依赖。为了能自动化地解析任何一个Java构件&#xff0c;Maven就必须将它们唯一标识&#xff0c;这就依赖管理的底层基础——坐标。将详细分析Maven坐标的作用&#xff0c;解释其每一个元素&#xff1b;在此基础上&#xff0c;再介绍如何配置Maven&…

embeddings

“embeddings”的中文翻译是“嵌入”或“嵌入向量”。在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;通常被称为“词向量”或“词嵌入”&#xff0c;它是表示词汇或令牌的一种方式&#xff0c;通过将这些词汇或令牌映射到一个向量空间中的点&#xff0c;以捕捉它们…

HTML5语法总结大全(持续更新中~)

参考书籍&#xff1a; 《HTML与CSS3基础教程》 参考视频&#xff1a; HTML5完整教学通俗易懂 2023新版前端Web开发HTML5CSS3移动web视频教程&#xff0c;前端web入门首选黑马程序员 参考网站&#xff1a; w3school 文章目录 零.开发环境准备1.需要的工具2.Vscode所需要插件3.其…

【Udemy】AWS CLF - 01 题库 (英文版 + 中文版)目录

【挑战业余一周拿证】CSDN官方课程目录 【挑战业余一周拿证】AWS 认证云从业者 薅200美金羊毛 一、介绍 文章记录题库&#xff08;包含答案解释中文翻译&#xff09; 共计23章&#xff0c;每天更新 2-10 章习题&#xff0c;需要的客观请点赞收藏 来源Udemy&#xff0c;刷题…

这款高性能分布式ID生成器,现在是你的了~

这是DDD&微服务系列的第17篇&#xff0c;欢迎持续关注~ 概述 在软件开发过程中&#xff0c;我们经常会遇到需要生成全局唯一流水号的场景&#xff0c;例如各种流水号和分库分表的分布式主键ID。特别是在使用MySQL数据库时&#xff0c;除了要求流水号具有“全局唯一”性外&…

SAP_ABAP_基础编程_DESCRIBE FIELD_获取数据对象的属性

SAP ABAP 顾问&#xff08;开发工程师&#xff09;能力模型_Terry谈企业数字化的博客-CSDN博客文章浏览阅读450次。目标&#xff1a;基于对SAP abap 顾问能力模型的梳理&#xff0c;给一年左右经验的abaper 快速成长为三年经验提供超级燃料&#xff01;https://blog.csdn.net/j…

CCFCSP试题编号:202109-2试题名称:非零段划分

用差分法 #include<iostream> #include<algorithm> #include<cstring> using namespace std;const int N 500000; const int M 10000; int a[N 2 ] { 0 }; int d[M 1] { 0 };int main() {int n;cin >> n;for (int i 1; i < n; i){cin >&g…

共享充电宝被取代,共享WIFI项目将成市场趋势!

在创业领域如果有这样一个项目&#xff0c;你会选择哪一个&#xff1f;前者投资十万风险大&#xff0c;后者投资几千风险小。同样需要扫街地推&#xff0c;但产生的利润是相同的。相信100%的人会选择后者。实际上这两个项目前者就是共享电宝&#xff0c;后者就是共享WiFi项目。…

STM32--GPIO(8种工作模式)

目录 一、GPIO基本介绍 二、GPIO基本结构分析 1、保护二极管 2、上拉、下拉电阻 3、施密特触发器 4、P-MOS管和N-MOS管 三、GPIO的8种工作方式 1、浮空输入 2、上拉输入 3、下拉输入 4、模拟输入 5、开漏输出 6、推挽输出 7、复用开漏输出 8、复用推挽输出…

JSP forEach 标签遍历map集合

之前我们说了 普通list 单纯按数量循环 bean类型list的遍历方式 那么 我们forEach标签 也能循环map语法非常简单&#xff0c;和循环list基本是一样的 我们直接上jsp代码 <% page import"java.util.Map" %> <% page import"java.util.HashMap" %…

UDP实现群聊通信

服务器端 #include <myhead.h> #define UDPIP "192.168.115.92" #define UDPPORT 6666 //存储客户信息的链表结构体 typedef struct Node {char name[20];struct sockaddr_in cin;struct Node *next; }*linklist; //数据结构体 struct data_cli {char type;ch…