Angular Material Progress 微调器和进度条不显示

Question

我正在开发 Angular 4。我创建了一个新项目:

ng new test-app

然后我跑了:

npm install --save @angular/material @angular/cdk
ng g c first

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';

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

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

first.component.html

<p>
  first works!
</p>


<mat-spinner></mat-spinner>

<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>

Result here in the browser

在检查器中，微调器看起来正在工作。 (进度条也一样) 但是没有检查员，我什么都看不到。

我尝试在 css 中更改颜色，背景似乎有效，但颜色没有任何改变。 无论我尝试了什么，我都看不到我的微调器或进度条。

我在 Mozilla/Chrome/IE11 上试过，同样的问题。

有人有想法吗？ 谢谢。

Answer 1

您必须在 styles.css 中导入主题，例如将此行添加到文件顶部:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

由于某些组件依赖于 BrowserAnimationsModule，因此您应该始终将其导入以使动画工作。

有关所需设置的更多详细信息，请查看 setup guide .