Angular弹出模态框的方式

 时间:2026-02-14 07:46:58

1、一、弹出方式一

1.alert弹框

(1)demo目录

--------app.component.ts

--------app.component.html

--------app.module.ts

--------detail(文件夹)

------------detail.component.ts

------------detail.component.html

(2)demo代码

app.module.ts导入必要的BootstrapModalModule 和ModalModule ,再注册它们

Angular弹出模态框的方式

2、app.component.ts编写这个按钮的动作showAlert()

Angular弹出模态框的方式

3、detail.component.html编写alert弹框的布局

Angular弹出模态框的方式

4、detail.component.ts创建模态框组件,需要创建一个组件,然后由 ngx-bootstrap-model 帮忙引导启动对于这个组件需要继承 DialogComponent<T, T1> 类,包含两个参数:

T 外部传参给模态框的类型。

T1 模态框返回值类型。

因此,DialogService应该是DialogComponent的一个构造函数的参数。

Angular弹出模态框的方式

5、2.confirm弹框

(1)demo目录

--------app.component.ts--------app.component.html--------app.module.ts--------confirm(文件夹)------------confirm.component.ts------------confirm.component.html

(2)demo代码

app.module.ts导入必要的BootstrapModalModule 和ModalModule ,再注册它们,这些都跟alert弹框一样,因为这些都是方法一的弹出方式

Angular弹出模态框的方式

6、app.component.html创建一个可以弹出模态框的按钮

Angular弹出模态框的方式

7、app.component.ts编写这个按钮的动作showConfirm()

Angular弹出模态框的方式

8、confirm.component.html编写confirm弹框的布局

Angular弹出模态框的方式

9、confirm.component.ts创建模态框组件

Angular弹出模态框的方式

10、3.内置弹框

(1)demo目录

--------app.component.ts

--------app.component.html--------app.module.ts

(2)demo代码

内置弹框也包括 alert confirm prompt 三种形态,都有一些内置的样式

app.module.ts

Angular弹出模态框的方式

11、app.component.ts很简单,连组件的布局都不用写,传入一些参数比如图标icon,大小size等

Angular弹出模态框的方式

12、二、弹出方式二

还是跟上一种方法一样,先安装ngx-bootstrap-modal,然后导入bootstrap样式表

1.demo目录

--------app.component.ts--------app.component.html--------app.module.ts

2.demo代码

app.module.ts导入相应模块,并且注册它们

Angular弹出模态框的方式

Angular弹出模态框的方式

13、三、最终效果

将上面所有的弹框全部写在一起,然后效果就是这样的

Angular弹出模态框的方式

  • SAP 如何定义incoterms国际贸易术语
  • 几何画板如何快速制作点标签
  • 处置冗余存货的方法
  • 怎样查阅外国文献
  • 迅雷怎么设置自动删除文件不存在任务?
  • 热门搜索
    手抄报图片素材 九一八手抄报 关于卫生的手抄报 迎国庆手抄报 白衣天使的手抄报图片 清明节手抄报内容50字 六一儿童节手抄报简单 劳动节手抄报图片 关于环境的手抄报 国防手抄报简单又字少