Question

Angular 5 Material Spinner无法正常工作

app.module.ts

import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@NgModule({
  imports: [
    MatProgressSpinnerModule
  ]})

component.ts

import { MatSpinner } from '@angular/material';

component.html

<mat-spinner></mat-spinner>

我错过了任何配置。？

在Reference中，它为Spinner生成一个SVG文件，但我在mat-spinner标签中看不到任何内容。

Answer 1

[mode] =“ determinate” <<这只会显示圆圈，不会旋转！

收件人

[mode] =“'determinate'” // <<<<常数的单引号

〜〜〜〜〜〜〜〜〜〜〜< em>〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

也正如deanwilliammills所说，模式=“确定”

Answer 2

我试图给出mat-spinner示例，并且完美无缺。我能看到的唯一区别是导入微调器模块而不是从特定路径导入它的方式：

  import { MatProgressSpinnerModule } from '@angular/material';

您不需要在组件内部导入任何内容，因为mat-spinner扩展了matprogressSpinner。

在相关的html内部，只需执行您正在执行的操作，即

<mat-spinner></mat-spinner>

您可以查看一下：https://stackblitz.com/angular/eymjpelkpro这可能会为您提供更多背景信息。

Answer 3

这里的关键是导入BrowserAnimationsModule。我正在使用角度10

app.module.ts 文件中 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

在imports数组内部放入BrowserAnimationsModule 。

Answer 4

摆脱[mode] =＆＃34;确定＆＃34;

这对我有用。看起来像Angular 5人需要解决的错误

我的代码：

<强>旧

<mat-progress-spinner
    class="progressSpinner"
    [color]="myCustomColor"
    [mode]="determinate"
    [value]="myCustomValue">
</mat-progress-spinner>

新：

<mat-progress-spinner
    class="progressSpinner"
    [color]="myCustomColor"
    [value]="myCustomValue">
</mat-progress-spinner>

Answer 5

在组件类中，您必须声明何时显示以及何时使用来隐藏微调器

spinner.show（）;

spinner.hide（）;

您还可以使用ngx-spinner https://www.youtube.com/watch?v=5wzn5HDq0rk&

Answer 6

我有一个特殊情况，即mat-spinner没有显示，控制台或编译中绝对没有错误，但在DOM中仍然可见。

我忘记将必须使用mat-spinner的组件添加到模块的declarations数组中...

import { NgModule } from '@angular/core';
import { MaterialModule } from '../../../global/material/material.module';
import { YourComponent} from './your.component';

@NgModule({
    declarations: [YourComponent], // <--- here this
    imports: [
        MaterialModule
    ],
})
export class SomeModule {}

Answer 7

仅当您在app.module.ts中导入BrowserAnimationsModule时，才会支持任何类型的动画。

从“ @ angular / platform-browser / animations”导入{BrowserAnimationsModule};

Angular 5 Material Spinner无法正常工作

7 个答案: