本文转自:https://blog.csdn.net/whm18322394724/article/details/80177950

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/whm18322394724/article/details/80177950
正文

  小菜继续学习积累中,今天做了一下提示框,也是小菜模仿的,所以下面我就来简单解释一下如何制作提示框,以及解析一下代码和逻辑。 
  其实整个逻辑思路很简单,就是先在前台用HTML的p-dialog等元素组装弹框,然后和后台绑定数据,而后台则写方法通过调用方法告诉前台什么时候提示什么内容。具体代码解析如下。

◆前台

1.弹框样式 

2.代码解析

<!--使用p-dialog元素做提示框-->
<p-dialog header="提示" [(visible)]="displayP" modal="modal" width="400" [responsive]="true">
<!--使用p标签来显示提示内容,并让其居中,具体什么内容使用插值表达式与后台进行绑定,据情况而提示-->
<p style="text-align:center">
{{messages}}
</p>
<!--脚注:脚注部分放置一个确定按钮,点击确定表示用户收到该提示,然后关闭提示框-->
<p-footer>
<button type="button" pButton (click)="displayP=false" label="确定">
</button>
</p-footer>
</p-dialog>
  • 1
◆后台

1、封装

  //定义提示框的可见性为Boolean值
displayP: boolean;
//设提示框提示内容初始值为空
messages: "";
//将提示框封装成一个方法,以便重用
showDialog(string) {
//将参数赋给messages
this.messages = string;
//提示框可见
this.displayP = true;
}

2、调用 
  这里调用我随意选取的一个方法作为例子,其实最关键的代码就是一句 ——this.showDialog(“提示信息”)

  next() {
//先拿到缓存中的数据
let teacherInfo = JSON.parse(localStorage.getItem("teacherInfo"));
//判断是否至少选中表格中的一条数据
if (teacherInfo == null) {
//调用提示框方法,并给这个方法传递参数
this.showDialog("请先选中一名教师");
//alert("请先选中一名教师");
return;
}
//存放到大model中
this.publicteachModel.teacherId = teacherInfo.code;
//跳转
this.router.navigate(['workspace/education-plan/course-info'])
}

[转]Angular——提示框的更多相关文章

  1. Angular toastr提示框

    1. 安装ngx-toastr包 npm install ngx-toastr --save 2. package.json中引入toastr样式文件 "styles": [&qu ...

  2. 如何使用CSS创建巧妙的动画提示框

    当你的用户需要一些额外的上下文来放置图标,或者当他们需要一些保证来点击按钮,或者可能是一个复活节彩蛋的标题来搭配一个图片时,工具提示是一个很好的方法来增强用户界面.现在让我们来制作一些动画工具提示,只 ...

  3. 利用CSS中的:after、: before制作的边三角提示框

    小颖昨天分享了一篇参考bootstrap中的popover.js的css画消息弹框今天给大家再分享一篇使用:before和:after伪元素画消息弹框的CSS. 画出来是介个酱紫的: 有没有觉得画的萌 ...

  4. javascript-模板方法模式-提示框归一化插件

    模板方法模式笔记   父类中定义一组算法操作骨架,而将一些实现步骤延迟到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤   实例:弹出框归一化插件 css样式 ;width ...

  5. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  6. 纯css来实现提示框

    用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...

  7. js弹出框、对话框、提示框、弹窗总结

    一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...

  8. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  9. android标题栏下面弹出提示框(一) TextView实现,带动画效果

    产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...

随机推荐

  1. 使用Shell脚本对Linux系统和进程资源进行监控

    ShellLinux脚本 摘要:Shell语言对于接触Linux的人来说都比较熟悉,它是系统的用户界面,提供了用户与内核进行交互操作的一种接口.本文我们以Bash做为实例总结了使用Shell对系统和进 ...

  2. MFC停靠窗口实现(CDockablePane)

    工作中编写MFC界面程序时用到了停靠窗口,为了避免之后用到时再去查询,这里记录下. 步骤 1.定义一个继承自CDockablePane的类 Class CDockableTest : public C ...

  3. 第一个Python小爬虫

    这个爬虫是参考http://python.jobbole.com/81353/这篇文章写的 这篇文章可能年代过于久远,所以有些代码会报错,然后我自己稍微修改了一下,增加了一个getContentAll ...

  4. 安装Intellij IDEA(ideaIU-2017.2.3)并完成Intellij IDEA的简单配置

    一.Intellij IDEA的简介 Intellij IDEA是java语言的集成开发环境,与Eclipse相比,它的功能更多.更强大.更智能,Eclipse更适合刚学习java语言的初学者,它操作 ...

  5. Vuejs——(11)组件——slot内容分发

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

  6. Eclipse运行时发生An internal error occurred during:“**************” 的解决办法

    2015-05-20 原因分析: 当前工作目录下的 .project 文件 不一致 例如1: 南京大学 Mooctest 提交考试试卷时出现的:An internal error occurred d ...

  7. NET Core微服务之路:SkyWalking+SkyApm-dotnet分布式链路追踪系统的分享

    对于普通系统或者服务来说,一般通过打日志来进行埋点,然后再通过elk或splunk进行定位及分析问题,更有甚者直接远程服务器,直接操作查看日志,那么,随着业务越来越复杂,企业应用也进入了分布式服务化的 ...

  8. 【算法】实现字典API:有序数组和无序链表

    参考资料 <算法(java)>                           — — Robert Sedgewick, Kevin Wayne <数据结构>       ...

  9. Windows 远程栈溢出挖掘与利用

    缓冲区溢出攻击很容易被攻击者利用,因为 C 和 C++等语言并没有自动检测缓冲区溢出操作,同时程序编写人员在编写代码时也很难始终检查缓冲区是否可能溢出.利用溢出,攻击者可以将期望数据写入漏洞程序内存中 ...

  10. cad.net DeepCloneObjects WasErased

    /// <summary> /// 克隆图元到块表记录 /// </summary> /// <param name="objId">id数组& ...