angular - 如何在 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>

角度 6.1.9，清晰度 0.13.4