如何使用Angular和VMware Clarity的模态对话框？

Question

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

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

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

Answer 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

Answer 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>

Angular 6.1.9，净度0.13.4