如何在 Angular 和 VMware Clarity 中使用模态对话框？答案

【问题标题】：How to use modal dialog with Angular and VMware Clarity?如何在 Angular 和 VMware Clarity 中使用模态对话框？
【发布时间】：2017-10-10 10:35:48
【问题描述】：

我需要显示一个带有问题和是/否按钮的模式对话框控件，等待用户的选择，然后运行一些代码来执行选定的操作。

VMWare Clarity 文档对对话框内的标记非常清楚，但没有讨论如何显示或隐藏它。

我想要一个完整的例子，谢谢。

【问题讨论】：

....我的意思是可重用的解决方案，比如对话服务，而不是每个组件中的固定对话控制 - 这可用于小型应用程序。
我认为已经为此提交了一个问题：github.com/vmware/clarity/issues/1364。这是你想要的？如果是，您应该订阅 Clarity 团队的更多更新。
感谢链接 - 该讨论是关于对话服务的，但没有解决方案。
你的问题不清楚。你的意思是说你想对对话框中提供的输入用户进行操作？您可以使用ngModel。请详细描述您要查找的内容。
对于 Angular 4 需要这样的东西：（抱歉格式错误，我使用 `` 但在这里不起作用）` dialogservice.confirm("Are you sure?", {title : "Dialog title"}) .then(function(p) { 成功代码 }, function(p) { 失败代码 } ); ` 如您所见，一切都在一个地方而且很简单。

标签： angular dialog modal-dialog vmware-clarity

【解决方案1】：

我假设您描述的情况是您想要确认某个操作（例如确认您希望删除一个项目），如果是这样，您应该查看此处找到的代码。您可以按照它调用的方法来查看逻辑。

https://github.com/gnomeontherun/clarity-workshop/blob/master/src/app/budget/budget/budget.component.html#L56

这是一个删除按钮，它调用一个方法，然后打开一个模式对话框。用户然后确认或取消，然后如果他们确认它调用 API 实际删除。

如果您想创建自己的服务来控制模态，您可以按照我为警报服务和警报组件提供的示例（但将其更改为模态）。 https://github.com/angular-in-action/portfolio/tree/master/src/app/alert

【讨论】：

感谢您的回答。是的，我需要等待用户响应，然后执行一些操作。您在上面链接中的示例使用 create 为每个需要对话框的组件中的每个对话框 - 模态对话框是组件的一部分。 npm 源中有一些对话服务，但不幸的是没有为 angular 4/5 维护。
Clarity modals 是声明性的，目前没有服务。如果您想提交有关您的期望的更多详细信息，请在此处github.com/vmware/clarity/issues/1364 提出功能请求。
您也可以拥有一个“全局”模式，并创建自己的服务来控制它何时出现以及显示什么。

【解决方案2】：

假设用户单击“删除订单”按钮，并且您希望显示一个带有“您确定吗？”的模式对话框。以及“取消”和“删除”按钮。

上面杰里米的例子很棒。这是一个最小的实现：

在order.component.ts:

isModalVisible = false;

deleteOrder() {
  ...
}

在order.component.html:

<div>
  ...
  <button (click)="isModalVisible = true">Delete Order</button>
  ...
</div>

<clr-modal [(clrModalOpen)]="isModalVisible">
  <h3 class="modal-title">Delete order?</h3>
  <div class="modal-body">This cannot be undone.</div>
  <div class="modal-footer">
    <button type="button" class="btn (click)="isModalVisible = false">Cancel</button>
    <button type="button" class="btn (click)="deleteOrder()">Delete</button>
  </div>
</clr-modal>

角度 6.1.9，清晰度 0.13.4

【讨论】：