angular2-material 与 systemjs 一起用于 Angular2答案

【问题标题】：angular2-material used with systemjs for Angular2angular2-material 与 systemjs 一起用于 Angular2
【发布时间】：2016-10-09 05:24:57
【问题描述】：

我已经在enter link description here上关注了教程：英雄之旅

我正在尝试向其中添加 angular2-material，但我无法让 CSS 正常工作。我错过了什么或做错了什么？

my systemjs configuration

我在 app.component.ts 中做了如下配置

import {MD_LIST_DIRECTIVES} from '@angular2-material/list/list';

@Component({
  selector: 'my-app',
  template:
  ....
  directives: [HeroDetailComponent,MD_LIST_DIRECTIVES],

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

确保您导入了您正在使用的所有指令，例如：

import {MD_CARD_DIRECTIVES} from '@angular2-material/card';
import {MdInput} from '@angular2-material/input';
import {MdCheckbox} from '@angular2-material/checkbox';

See the full list of Angular2 Material Directives here

【讨论】：

到目前为止，我只是在尝试使用 md-list 和 md-list-item。因此我只尝试使用 MD_LIST_DIRECTIVES。

【解决方案2】：

由于最新的 angular2 和 angular2 材料已经改变了他们的 systemjs 设置方式，我在网上找不到任何东西，但我终于找到了怎么做。

从 Angular 2 快速入门获取 ng2 的最新版本（2.1.2），在你的 package.json 中添加这两个

 "@angular/material": "^2.0.0-alpha.9-3",
 "@types/hammerjs": "2.0.33"

添加到您的 systemjs.config.js 为：

map: {
  // our app is within the app folder
  app: 'app',
    :
    '@angular/material': 'npm:@angular/material/material.umd.js',
    :

将您的 app.module.ts 更改为：

@NgModule({
      imports:      [ BrowserModule],

到：

 @NgModule({
      imports:      [ BrowserModule, MaterialModule.forRoot()],

您还可以在 index.html 中添加一些 CSS。更多详情请见https://github.com/Longfld/ng2QuickStartForBeginning

【讨论】：