使用角度/材料时遇到问题答案

【问题标题】：Trouble using angular/material使用角度/材料时遇到问题
【发布时间】：2018-01-25 08:29:04
【问题描述】：

我正在尝试重构我的代码以使用 Angular/Material 作为前端，但是我似乎无法让它工作...

我遵循了angular material website 和 Youtube 视频教程中所说的内容，但它似乎并不想工作。

我已经运行了正常的 npm 命令：

npm install --save @angular/material@latest @angular/cdk@latest @angular/animations@latest

我在app.module.ts 中导入了一个材质按钮以及动画：

// Other imports are above
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    Routing,
    GreyhoundComponentModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatButtonModule,
  ],
  declarations: [
    AppComponent
  ],
  providers:[
    DecoratorUtils,
    Configuration,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AppHttpInterceptor,
      multi: true
    }
  ],
  bootstrap:    [ AppComponent]
})
export class AppModule { }

我在 CSS 文件中导入了一个主题：style.css

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

在 HTML 文件中，我使用了 angular/material 网站给出的元素标签：

<button mat-button color="primary">Primary</button>

【问题讨论】：

您的控制台是否收到任何错误？也许你可以准备一个 JS Fiddle？ jsfiddle.net
这是更专有的代码，所以我不愿意分享整个事情:-(...目前我得到输出：Angular 正在开发模式下运行。调用 enableProdMode()启用生产模式。但是，如果我尝试使用网站给出的示例来使用复选框，我会得到：'mat-checkbox' is not a known element：
@physicsboy 尝试使用import { MdButtonModule } from '@angular/material' 而不是import { MatButtonModule } from '@angular/material/button'
将import { MatButtonModule } from '@angular/material/button';更改为import { MatButtonModule } from '@angular/material

标签： javascript css node.js angular

【解决方案1】：

改成

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

根据需要从角度材质导入按钮模块并添加

@import '~bootstrap-sass/assets/stylesheets/bootstrap';

【讨论】：