Question

我尝试将Angular Material 2与Angular 2.4.2一起使用，但是某些组件（如收音机或复选框）无法正常工作。

SystemJS配置：

System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  map: {
    app: "./src",

    '@angular/core': 'npm:@angular/core@2.4.2/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common@2.4.2/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@2.4.2/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@2.4.2/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.4.2/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http@2.4.2/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router@3.4.0/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms@2.4.2/bundles/forms.umd.js',
    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
    'hammerjs': 'npm:hammerjs/hammer.js',

    '@angular/core/testing': 'npm:@angular/core@2.4.2/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles@2.4."0"/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler@2.4.2/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser@2.4.2/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic@2.4.2/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http@2.4.2/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router@2.4.2/bundles/router-testing.umd.js',

    'rxjs': 'npm:rxjs'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },  
    rxjs: {
      defaultExtension: 'js'
    }
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  }
});

的AppModule

@NgModule({
  imports: [ BrowserModule, MaterialModule.forRoot() ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

AppComponent

@Component({
  selector: 'my-app',
  template: `
    <h1>Angular 2.4.0 with Material2</h1>

    <div>
      <md-input-container>
        <input md-input type="text" placeholder="foobar">
      </md-input-container>
    </div>
    <div>
      <md-checkbox [checked]="true">test</md-checkbox>
    </div>
    <div>
      <md-radio-group>
        <md-radio-button value="option_1">1</md-radio-button>
        <md-radio-button value="option_2">2</md-radio-button>
      </md-radio-group>
    </div>
    <div>
      <md-select placeholder="Select">
        <md-option [value]="A"> Value A </md-option>
        <md-option [value]="B"> Value B </md-option>
        <md-option [value]="C"> Value C </md-option>
      </md-select>
    </div>
  `
})
export class App implements OnInit {
  constructor() {}

  ngOnInit() {}
}

我创建了一个有问题的plunkr： https://plnkr.co/edit/T1pjY1so6N1YXx3Trq7x

其他我从mgechev检查了一个新版本的angular-seed https://github.com/mgechev/angular-seed 使用全新配置验证材料2，但我得到相同的样式问题。我的配置有什么问题？

Answer 1

看起来你没有主题。引入时应该修复它：

https://github.com/angular/material2/blob/master/guides/theming.md

角度材料2具有角度2.4-x造型问题

1 个答案: