angular / material2模块，如Button，ProgressBar，输入不起作用

Question

我使用npm install --save @angular/material安装了angular / material2。我正在使用@ angular / cli。

安装angular/material后，node_modules/@angular文件夹下的资料文件夹不包含 button，button-toggle，{{1}等文件夹} 等...这意味着我无法在我的应用中使用小部件。

为了解决这个问题我做了：

card

之后，我很困惑如何加载模块并使用它们。 This教程是最接近解决我问题的教程，但是我的环境和教程环境有点不同，例如没有npm install --save @angular2-material/core npm install --save @angular2-material/button 和angular-cli-build.js文件。

材料文件夹中的文件夹结构仅包含system-config.ts，@angular，bundles，prebuilt-themes个文件夹。

以下是我从here复制的代码：

typings：

app.component.ts

import {Component, Optional} from '@angular/core'; import {MdDialog, MdDialogRef, MdSnackBar, MdButtonModule, MdCheckboxModule} from '@angular/material'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { isDarkTheme: boolean = false; lastDialogResult: string; foods: any[] = [ {name: 'Pizza', rating: 'Excellent'}, {name: 'Burritos', rating: 'Great'}, {name: 'French fries', rating: 'Pretty good'}, ]; progress: number = 0; constructor(private _dialog: MdDialog, private _snackbar: MdSnackBar) { // Update the value for the progress-bar on an interval. setInterval(() => { this.progress = (this.progress + Math.floor(Math.random() * 4) + 1) % 100; }, 200); } openDialog() { let dialogRef = this._dialog.open(DialogContent); dialogRef.afterClosed().subscribe(result => { this.lastDialogResult = result; }) } showSnackbar() { this._snackbar.open('YUM SNACKS', 'CHEW'); } } @Component({ template: ` <p>This is a dialog</p> <p> <label> This is a text box inside of a dialog. <input #dialogInput> </label> </p> <p> <button md-button (click)="dialogRef.close(dialogInput.value)">CLOSE</button> </p> `, }) export class DialogContent { constructor(@Optional() public dialogRef: MdDialogRef<DialogContent>) { } } ：

app.component.html

我希望得到一个结果like here：

但我得到的结果如下所示：

Answer 1

从他们的Getting Started页面...

步骤3：导入组件模块

为您要使用的每个组件导入NgModule：

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MdButtonModule, MdCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

或者，您可以创建一个单独的NgModule，用于导入将在应用程序中使用的所有Angular Material组件。然后，您可以将此模块包含在您希望使用组件的任何位置。

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  imports: [MdButtonModule, MdCheckboxModule],
  exports: [MdButtonModule, MdCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

无论您使用哪种方法，请务必在Angular的BrowserModule之后导入Angular Material模块，因为导入顺序对NgModules很重要。

Answer 2

将这行代码放在styles.css上：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

而不是app.component.css解决了问题。另外，我在app.component.html中做了一些更改，如：

<md-input-container placeholder="First name"></md-input-container>

于：

<md-input-container> <input mdInput placeholder="First Name"></md-input-container>

我可以看到需要在angular/material2官方指南上更新内容。