Angular Material Spinner 不渲染答案

【问题标题】：Angular Material Spinner doesn't renderAngular Material Spinner 不渲染
【发布时间】：2017-10-23 16:38:08
【问题描述】：

我正在尝试使用 Angular Material 创建一个应用程序，即使文档也很好，但没有太多帮助。我正在使用 Angular4 和 Angular-cli。所以我安装并创建了一个简单的微调器标签，如下所示：

<div class="text-center">
  <img src="assets/Capture13.PNG" alt="" class="toplogo">
</div>

<div class="text-center">
    <mat-spinner> </mat-spinner>
</div>

<div>
    <input type="button" class="close" (click)="login('user','pwd')" value="hello" >
</div>

它没有渲染任何东西。显示一个空白窗口

我以为安装有问题，但后来我去检查页面并看到以下内容：

当我将鼠标悬停在控件上时，它清楚地表明我的形状与旋转器完全相似。它让我相信组件正在加载，但由于某些原因它不仅仅是可见的。我也按照文档中的建议安装了 Hammerjs，并且在我的 index.html 中也包含了hammerjs 和预建的粉色主题：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

任何人都有任何想法，我可能会错过什么。最重要的是，我没有收到任何错误，即它没有渲染等，因为它似乎确实渲染了。有什么帮助吗？

【问题讨论】：

奇怪，它在 plunker 上运行良好：embed.plnkr.co/ibVGU6 with (hammerjs)
确实如此，这就是我处于头晕模式的原因。因为同样的代码也适用于 plunker。
问题来自你的粉红色主题，我认为因为如果我将它从 plunker 中删除，我也会遇到同样的问题。所以你可以尝试在你的 style.css 中添加 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
好的，谢谢。这就是问题所在。解决了。
好的，我来回答你的问题。

标签： angular angular-cli angular-material2

【解决方案1】：

我认为问题来自您的粉红色主题，因为如果我将其从plunker 中删除，我也会遇到同样的问题。所以你可以尝试添加你的 style.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css"

【讨论】：