是否有任何不那么复杂的方式在角度2中进行确认对话,想法是点击一个项目,然后显示一个弹出窗口或模态以确认其删除,我尝试从这里angular2-modal角度2模态,但我不't know how to make that if you confirm or cancel it does something. the click function works fine, the only problem is that I don' t太了解如何使用它 . 我还有另一个带有相同插件的模态,与我使用的不同 .
this.modal.open(MyComponent);
而且我不想创建另一个组件只是为了显示一个确认框,这就是我要问的原因 .
7 回答
为了在多模块应用程序中重用单个确认对话框实现,该对话框必须在单独的模块中实现 . 这是使用Material Design和FxFlex执行此操作的一种方法,尽管这两种方法都可以修剪或替换 .
首先是共享模块(./app.module.ts):
对话框组件(./confirmation-dlg.component.ts):
然后我们可以在另一个模块中使用它:
组件的单击处理程序使用对话框:
只是使用
this.modal.open(MyComponent);
,因为你赢了't return you an object whose events you can subscribe to which is why you can' t得到它做一些事情 . 此代码创建并打开一个对话框,其中包含我们可以订阅的事件 .如果你修剪css和html这实际上是一个简单的组件,但是自己编写它可以让你控制它的设计和布局,而预先编写的组件需要更加重量级才能给你控制 .
您可以在函数内部使用window.confirm并结合if条件
当您调用delete方法时,它将弹出一条确认消息,当您按下ok时,它将执行if条件内的所有逻辑 .
使用javascript的本机确认功能和自定义Angular指令,这是一个非常不同的看法 . 它非常灵活,非常轻巧:
用法:
指示:
UPDATE: Plunkr added
我在所有论坛上都寻找解决方案,但没有找到,所以找到了Old School Javascript Callback函数的解决方案:-)这是一个非常简单干净的方法来创建一个确认对话框并为 YES 和 NO 点击设置回调函数事件 .
我使用了Bootrap CSS for Modal和一个警报服务与rxjs Subject .
这是我的 alert.component.html
和 alert.component.ts
最重要的部分就在这里! alert.service.ts
Call the function from any component
Plunkr https://embed.plnkr.co/vWBT2nWmtsXff0MXMKdd/
Method 1
一种简单的确认方法是使用本机浏览器确认警报 . 模板可以有一个按钮或链接 .
组件方法可以如下所示 .
Method 2
获得简单确认对话框的另一种方法是使用角度引导程序组件,如ng-bootstrap或ngx-bootstrap . 您只需安装组件并使用模态组件即可 .
Examples of modals using ng-bootstrap
Examples of modals using ngx-bootstrap .
Method 3
下面提供了另一种使用我在项目中实现的
angular2/material
实现简单确认弹出窗口的方法 .app.module.ts
确认-dialog.ts
确认-dialog.html
app.component.html
app.component.ts
index.html =>在样式表中添加了
你可以使用sweetalert:https://sweetalert.js.org/guides/
然后,只需将其导入您的应用程序:
如果传递两个参数,第一个将是模态的 Headers ,第二个是文本 .
我参加派对的时间已经很晚了,但这是使用ng-bootstrap的另一个实现:https://stackblitz.com/edit/angular-confirmation-dialog
confirmation-dialog.service.ts
confirmation-dialog.component.ts
confirmation-dialog.component.html
使用如下对话框: