当我尝试在 angular 2 应用程序中使用 angular2-material 时。不渲染组件答案

【问题标题】：When Im trying to use angular2-material in angular 2 app. Components are not rendered当我尝试在 angular 2 应用程序中使用 angular2-material 时。不渲染组件
【发布时间】：2018-02-02 19:28:12
【问题描述】：

我尝试按照以下步骤将 Angular 材料包含到我的 Angular 2 应用程序中。

npm install --save @angular/material

使用以下语法导入模块

import {MdButtonModule, MdCheckboxModule} from '@angular/material';
imports: [MdButtonModule, MdCheckboxModule],

这是我的 app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<html>
  <head>

  </head>
  <body>
<div style="text-align:center">

<md-chip-list class="mat-chip-list-stacked">
  <md-chip *ngFor="let chipColor of availableColors"
      selected="true"
      color="{{chipColor.color}}">
    {{chipColor.name}}
  </md-chip>
</md-chip-list>

  <h1>
    Welcome to {{title}}!!
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
</div>
<h2>Here are some links to help you start: </h2>


<ul>
  <li>
    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
  </li>
</ul>
  </body>
</html>

这是我的 app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   color: string;

  availableColors = [
    { name: 'none', color: '' },
    { name: 'Primary', color: 'primary' },
    { name: 'Accent', color: 'accent' },
    { name: 'Warn', color: 'warn' }
  ];

}

最后是我的 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MaterialModule } from '@angular/material'
import { MdChipsModule } from '@angular/material'
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在我的结果中，芯片应该显示如下：

但它实际上是这样显示的：

【问题讨论】：

您没有将样式表包含到您的应用程序中。你用的是systemjs还是cli？
我使用 CLI 创建了 angular2 应用程序
您是否添加了stylesheets？
没有。我尝试在我的 index.html 文件中包含但它没有呈现
您可以将其添加到您的angular-cli.json 文件的styles 部分。

标签： angular angular-material

【解决方案1】：

您从错误的路径导入

"styles": [
        "styles.css",
        "../node_modules/@angular/material/prebuilt-themes/purple-green‌.css"
]

【讨论】：

哦！我可以从哪里导入这个默认主题？

【解决方案2】：

这是因为我没有添加预建样式。

最后这对我有用。我将以下链接添加到 src 文件夹中的 style.css 文件：

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

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

成功了！！！

【讨论】：