Question

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

首先：此plunker将样式显示为素材（当您点击按钮时，您会在按钮上看到动画）

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

第二个例子 会出现什么问题？，为什么不采用材质风格？

Answer 1

这是因为您没有在MATERIAL_DIRECTIVES属性的InventoryApp组件中的第二个plunkr中设置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

1 个答案: