Question

我正在尝试将材质设计元素添加到quickstart角度应用

在app.module.ts中添加了以下内容：

import {MaterialModule} from '@angular/material';

@NgModule({
  imports:      [ BrowserModule, MaterialModule.forRoot()],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

在app.component.ts中添加了以下内容：

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1><md-slide-toggle>Slide Toggle</md-slide-toggle>',
})

这是plunkr http://plnkr.co/edit/gAIVxRTA0QZNu3uTC66k?p=preview

Answer 1

DEMO ：http://plnkr.co/edit/IpeusijLdoTb6p27m7d7?p=preview

<小时/> 您缺少必需的东西，如下所述，

1） 您需要先添加 angular2-material 包才能使用它。

<强> systemjs.config.js

'@angular/material':'npm:@angular/material/material.umd.js',  //<<<### added this

2） angular2-material需要 hammer.js 支持。因此，您还需要将其包含在 index.html

中

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>

Answer 2

将以下内容添加到systemjs.config.js解决了问题

packages: {
  '@angular/material': {
    format: 'cjs',
    main: 'material.umd.js'
  }
}

或以下也解决了：

'@angular/material':'npm:@angular/material/material.umd.js'

无法将材料设计元素添加到样板应用程序

2 个答案: