Angular Material Progress微調器和進度欄不顯示

Question

我正在使用Angular4。我通過以下項目創建了一個新項目：

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> 

結果在瀏覽器中

在檢查器中，微調器似乎正在工作。 （與進度條相同），但是沒有檢查員，我什么也看不到。

我試圖在CSS中更改顏色，背景似乎可以工作，但是顏色沒有任何變化。 無論嘗試什么，都看不到微調器或進度欄。

我曾經在Mozilla / Chrome / IE11上嘗試過，同樣的問題。

有人有主意嗎？ 謝謝。

Answer 1

您必須在styles.css導入主題，例如，將以下行添加到文件頂部：

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

由於某些組件依賴於BrowserAnimationsModule ，因此應始終導入它以使動畫正常工作。

有關所需設置的更多詳細信息，請參閱設置指南 。

Answer 2

覆蓋style.scss中的CSS角：

.mat-progress-spinner.mat-progress-spinner-indeterminate- 
animation[mode=indeterminate] {
    animation: mat-progress-spinner-linear-rotate 2s linear infinite !important;
}

.mat-progress-spinner.mat-progress-spinner-indeterminate- 
animation[mode=indeterminate] circle {
    transition-property: stroke !important;
    animation-duration: 4s !important;
    animation-timing-function: cubic-bezier(.35,0,.25,1) !important;
    animation-iteration-count: infinite !important;
}