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

Question

我正在研究Angular 4.我创建了一个新项目：

ng new test-app

然后我跑了：

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

app.module.ts

＆＃13;

＆＃13;

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 { }

＆＃13;

＆＃13;

＆＃13;

first.component.html

＆＃13;

＆＃13;

<p>
  first works!
</p>


<mat-spinner></mat-spinner>

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

＆＃13;

＆＃13;

＆＃13;

Result here in the browser

在检查员中，微调器看起来像是在工作。 （进度条的相同内容） 但没有检查员，我什么也看不见。

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

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

有没有人有想法？ 感谢。

Answer 1

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

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

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

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

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;
}

Answer 3

在您的styles.css中尝试

.mat-progress-spinner circle, .mat-spinner circle {
     stroke: blue; 
}