Angular2 +材料 - 如何加载表格？答案

【问题标题】：Angular2 + material - How to load form?Angular2 +材料 - 如何加载表格？
【发布时间】：2017-09-03 16:23:28
【问题描述】：

我在我的 angular2 应用程序中使用了材质不确定的微调器。

https://material.angular.io/components/progress-spinner/examples

当用户按下表单中的发送按钮时，我应该如何显示这个微调器。

我应该用微调器覆盖表格吗？制作一些过渡形式->微调器？还是别的什么？

请求成功后，它会改变路由到另一个视图。

【问题讨论】：

你正在寻找一个加载屏幕，我想直到表单将数据提交给服务并且路由成功，我想你应该看看路由器解析和路由器事件应该可以正常工作跨度>

标签： forms angular spinner loading loader

【解决方案1】：

我发现管理此类事件的最令人愉悦和最佳工作方式之一是在与表单相同的级别上实现加载 div，并在表单的 div 上使用ngIf 与交换状态的单击操作提交点击：

<div class="parent-div">
  <form *ngIf="!isSubmitted">
    ...
    <buttom type="submit" (click)="isSubmitted=true;">
  </form>
  <div class="loading-div" *ngIf="isSubmitted">
    <md-spinner></md-spinner><br>
    Submitting data...
  </div>
</div>

这是一般的 HTML 模板结构，但您需要注意以下几点：

您可能希望您的表单在提交时调用一个方法，该方法使isSubmitted=true。
只要键入您的 parent-div 类，您就可以创建.loading-div { width: 100%, height: 100%, z-index: 100 }。这也将允许您向微调器添加一个类并将其放置在 div 的中心。
此方法还可以防止重复提交表单。
最好只将*ngIf 添加到装载容器，而不是将[disabled]="isSubmitted" 添加到您的提交按钮。使用这种方法可以使用透明背景，仍然可以显示数据，但可以清楚地表示表单已提交。

【讨论】：