Angular2 和 ng2Material

Question

我正在尝试使用 Angular2 使用 ng2Material，但我的代码样式有问题。

First：此 plunker 显示样式为 Material 作品（当您点击按钮时，您会看到按钮上方的动画）

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'
    }
  }
});

第二个：这是我的plunker，如果你点击按钮，你将看不到动画。

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 属性中的第二个 plunkr 中设置 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。

Angular2 和 ng2Material

Angular2 and ng2Material

javascript

typescript

angular-material

angular