Question

上的英雄之旅

我正在尝试添加angular2-material但是我无法使CSS正常工作。我错过了什么或做错了什么？

我在app.component.ts

中进行了以下配置

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

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

Answer 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

Answer 2

最新的angular2和angular2材料改变了他们的systemjs设置方式，我找不到任何来自互联网，但最后我发现了怎么做。

从angular 2 quickstart获取ng2的最新版本（2.1.2），在package.json

中添加这两个

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

以system：

添加到您的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

与Angular2的systemjs一起使用的angular2-material

2 个答案: