Angular 5 Material Spinner 不工作

Question

Angular 5 Material Spinner 不工作

app.module.ts

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

组件.ts

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

component.html

<mat-spinner></mat-spinner>

我是否缺少任何配置？

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

Answer 1

我尝试 fork 给出的 mat-spinner 示例并且效果很好。我能看到的唯一区别是导入进度微调器模块的方式，而不是从特定路径导入它：

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

你不需要在你的组件中导入任何东西，因为 mat-spinner 扩展了 matprogressSpinner。

在相关的 html 中做你正在做的事情，即

<mat-spinner></mat-spinner>

你可以看看这个：https://stackblitz.com/angular/eymjpelkpro这可能会给你更多的背景信息。

Answer 2

[模式]="确定"<< This will only show the circle but will not spin!

到

[模式]="'确定'" // <<<< single quote for constant value

~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~

也如 deanwilliammills 所提到的， 模式 = “确定”

Answer 3

这里的关键是导入

BrowserAnimationsModule

。我正在使用角度 10

在你的 app.module.ts 文件中

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

里面

imports

阵列放

BrowserAnimationsModule 

.

Answer 4

我有一个特殊情况，

mat-spinner

没有显示，在控制台或编译中绝对没有错误，但在 DOM 中仍然可见。

我忘了将必须使用

mat-spinner

的组件添加到模块的

declarations

-Array中......

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 5

去掉 [mode]="determinate"

这对我有用。 似乎 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 6

只有在 app.module.ts 中导入 BrowserAnimationsModule 才能支持任何类型的动画

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

Answer 7

对我来说，导入是正确的，但我忽略了控制台中关于缺少角核心主题的错误消息。

在主 style.scss 文件中导入主题为我解决了这个问题。 @import "@angular/material/prebuilt-themes/deeppurple-amber.css";

Answer 8

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

spinner.show();

spinner.hide();