角材料微调器不旋转答案

【问题标题】：Angular material spinner does not spin角材料微调器不旋转
【发布时间】：2020-06-25 10:13:50
【问题描述】：

我是 Angular 的新手，从 5 月开始就开始使用它进行一个新项目。现在我们需要在这个现有项目中添加材质微调器，但微调器并没有真正旋转。它只显示一个静态圆圈，我已经尝试过不同的模式。我真的不知道我错过了什么，我想知道如何调试它，因为我没有收到任何错误。

这是我的设置：

package.json

"@angular/animations": "^7.2.16",
"@angular/cdk": "^7.3.7",
"@angular/common": "^7.2.16",
"@angular/compiler": "^7.2.16",
"@angular/core": "^7.2.16",
"@angular/forms": "^7.2.16",
"@angular/material": "^7.3.7",
"@angular/platform-browser": "^7.2.16",
"@angular/platform-browser-dynamic": "^7.2.16",
"@angular/router": "^7.2.16",

我将此添加到 UiModule：

import { MatDialogModule, MatProgressSpinnerModule } from '@angular/material';
...
@NgModule({ imports: [UiSharedModule, DpDatePickerModule, FontAwesomeModule, MatDialogModule, MatProgressSpinnerModule],
  exports: [
    ButtonComponent,
    DropdownComponent,
    InputComponent,
    TabListComponent,
    TabContentComponent,
    DatePickerComponent,
    CardComponent,
    SpinnerComponent
  ],
  declarations: [
    ButtonComponent,
    DropdownComponent,
    InputComponent,
    TabListComponent,
    TabContentComponent,
    DatePickerComponent,
    CardComponent,
    SpinnerComponent
  ]
})

在html中我尝试了这两个版本：

<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>

和

<mat-spinner></mat-spinner>

我也在我的一个角度教程项目中尝试了相同的方法，它运行良好！所以我也想，我需要做一些角度更新？

【问题讨论】：

这能解决你的问题吗：stackoverflow.com/a/48741901/7743705
你的意思是除了app模块之外还有一个uimodule？

标签： angular angular-material

【解决方案1】：

我昨天可以和我的一位同事解决这个问题。因为这是一个暂停的项目，我们正在清理所有内容，所以我们偶然发现了在 app.module.ts 中声明的 NoopAnimationsModule。这阻止了动画：D

【讨论】：

【解决方案2】：

我使用 Angular 9 创建了一个项目，它运行良好。我想我的回答也适用于 7。

我注意到您正在声明 mat-modules 以及导入它们。你只需要像这样导入它们：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatProgressSpinnerModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里是一些使用微调器的示例代码。你在使用模式吗？

  <mat-progress-spinner class="spinner" 
                        mode="indeterminate" 
                        *ngIf="showSpinner" 
                        diameter="40">
  </mat-progress-spinner>

作为奖励，这里有一些 CSS 将其置于页面中间：

.spinner {
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

【讨论】：