Angular 5 Material Spinner 不工作答案

【问题标题】：Angular 5 Material Spinner is not workingAngular 5 Material Spinner 不工作
【发布时间】：2018-07-22 06:16:23
【问题描述】：

Angular 5 材质微调器不工作

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 标记中看不到任何内容。

【问题讨论】：

你遇到什么错误？
我在控制台中没有看到任何错误。它没有出现在浏览器中，我检查但我没有看到任何变化。
也许颜色是透明的？
<mat-spinner _ngcontent-c13></mat-spinner> 这是我在控制台中看到的。我仍然尝试改变颜色。
我也有同样的问题。使用微调器和 mat-icon ......其余的输入都可以正常工作

标签： angular angular-material spinner

【解决方案1】：

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

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

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

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

<mat-spinner></mat-spinner>

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

【讨论】：

现在 Spinner 来了，但我在浏览器中看不到，如何更改 spinner 的颜色属性
你只需要像
检查这个：stackblitz.com/angular/…。我还建议您浏览文档和示例一次。我认为这将解决你所有的问题。希望对您有所帮助。

【解决方案2】：

摆脱 [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>

【讨论】：

【解决方案3】：

[mode]="determinate"

到

[mode]="'determinate'" //

~~~~~~~~~~~~~~~~~~~~~~ em>~~~~~~~~~~~ p>

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

【讨论】：

救了我的命哈哈哈哈哈哈

【解决方案4】：

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

微调器.show();

微调器.hide();

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

【讨论】：

【解决方案5】：

我有一个特殊情况，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 {}

【讨论】：

【解决方案6】：

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

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

在imports数组里面放BrowserAnimationsModule 。

【讨论】：

我有否定 BrowserAnimationModule 的 NoOptionAnimationModule。干杯。

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

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

【讨论】：