Angular2和ng2Material

Question

我正在尝试将ng2Material与Angular2一起使用，但是我的代码样式存在问题。

首先 ：该素材显示材料工作时的样式（单击按钮时，按钮上方会显示动画）

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src",
    "ng2-material":"https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.8/ng2-material"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    'ng2-material': {
      defaultExtension: 'js'
    }
  }
});

第二 ：这是我的朋克 ，如果您单击按钮，您将看不到动画。

System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {
          'app': {defaultExtension: 'ts'},
          'ng2-material': {defaultExtension: 'js'}
        },
        map: {"ng2-material":"https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/ng2-material"}
      });
      System.import('app/main')
            .then(null, console.error.bind(console));

第二个示例可能是什么问题？为什么不采用Material样式？

Answer 1

这是因为您没有在InventoryApp组件的directives属性中的第二个插件中设置Material指令（ MATERIAL_DIRECTIVES ）。

import {MATERIAL_PROVIDERS, MATERIAL_DIRECTIVES} from "ng2-material/all";

@Component({
  selector: 'my-app',
  providers: [],
  directives: [MATERIAL_DIRECTIVES] // <-----
  template: `
    <md-content>
      <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
        <button md-raised-button class="md-raised">Button</button>
        <button md-raised-button class="md-raised md-primary">Primary</button>
        <div class="label">Raised</div>
      </section>
    </md-content>
  `
})
class InventoryApp{
  constructor(){

  }
}

这是更新的plunkr（从您提供的第二个开始）： https ://plnkr.co/edit/gQB30waaieVRNuKqxCu5?p=preview。