Angular Material Spinner不呈现

Question

我正在尝试使用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">

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

Answer 1

我认为问题来自你的粉红色主题，因为如果我从plunker删除它，我有同样的问题。所以你可以尝试添加你的style.css

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