带有 Angular 2.4-x 样式问题的 Angular Material 2答案

【问题标题】：Angular Material 2 with Angular 2.4-x styling problems带有 Angular 2.4-x 样式问题的 Angular Material 2
【发布时间】：2017-01-19 19:59:42
【问题描述】：

我尝试将 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 {}

应用组件

@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，但我遇到了相同的样式问题。我不明白我的配置有什么问题？

【问题讨论】：

标签： angular styling angular-material2

【解决方案1】：

您似乎没有主题。当你介绍它时应该修复它：

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

【讨论】：

某处我读到这是默认样式。将添加到它工作的索引页面后。