在模板中使用时没有显示Angular 2 Material Progress Bar？

Question

我正在尝试将 Angular 2 进度条合并到我的 Angular 应用程序中。

我使用 Webpack 作为打包工具。

我已经用这个 Angular 种子启动了这个项目，请找到种子的 git repo 链接

https://github.com/AngularClass/angular2-webpack-starter

我已经安装了所有依赖项，但进度条仍然没有显示。

组件文件

<div class="loading-overlay" *ngIf="loading">
  <!-- show something fancy here, here with Angular 2 Material's loading bar or circle -->
  Here
  <md-progress-bar mode="indeterminate"></md-progress-bar>
</div>

ngModule

import { MaterialModule } from '@angular/material';
@NgModule({
  bootstrap: [ AppComponent],
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    routing,
    MaterialModule.forRoot()
  ],

})

请帮忙

Answer 1

确保您的 index.html 中引用了以下 css 文件

在您的 webpack.config.js 中，在 app 部分下检查以下行是否存在

'@angular/material': 'npm:@angular/material/bundles/material.umd.js',

您也可以参考@angular/material 的cdn，如下所示

'@angular/material': 'https://unpkg.com/@angular/material/bundles/material.umd.js',

LIVE DEMO

Answer 2

正如@Christopher Moore 指出的那样，尝试删除

周围的括号

[MaterialModule.forRoot()] 

在进口中。如果这不能解决您的问题，请提供更多信息。

Answer 3

使用以下代码： 首先将其导入 app.module.ts

从“@angular/material”导入 {MatProgressBarModule}；

@NgModule({ 进口：[ MatProgressBar 模块 ]

})

You must have to import angular api

Answer 4

我克隆了 webpack starter 存储库并获得了进度条，整个过程是：

• 克隆存储库
• npm install + npm install -save @angular/material
• 添加材料代码，见下文
• npm run build:prod
• npm run server:prod

材料代码： 在 app.module.ts 中

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

在 app.module.ts @NgModule 导入部分添加：

MaterialModule.forRoot()

在其中一个组件模板中添加：

<md-progress-bar mode="indeterminate"></md-progress-bar>

在全局样式文件中，例如“src/styles/styles.scss”，添加如下所述的主题之一

@import '~@angular/material/core/theming/prebuilt/purple-green.css';

来自official docs

Angular Material 预打包了几个预构建的主题 css 文件。这些主题文件还包括核心的所有样式 （所有组件通用的样式），因此您只需包含一个 应用中 Angular Material 的单个 css 文件。

您可以将主题文件直接包含在您的应用程序中 @angular/material/core/theming/prebuilt

如果您使用的是 Angular CLI，这就像包含一行一样简单 在你的 styles.css 文件中：

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