angular/material2 按钮、进度条、输入等模块无法正常工作

Question

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

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

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

npm install --save @angular2-material/core
npm install --save @angular2-material/button

之后，我对如何加载和使用模块感到困惑。 This 教程是最接近解决我问题的教程，但是我的环境和教程上的环境有点不同，例如没有 angular-cli-build.js 和 system-config.ts 文件。

material文件夹内的文件夹结构只包含@angular、bundles、prebuilt-themes、typings文件夹。

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

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:

<md-sidenav-container [class.m2app-dark]="isDarkTheme">

  <md-sidenav #sidenav mode="side" class="app-sidenav">
    Sidenav
  </md-sidenav>

  <md-toolbar color="primary">
    <button class="app-icon-button" (click)="sidenav.toggle()">
      <i class="material-icons app-toolbar-menu">menu</i>
    </button>

    Angular Material2 Example App

    <span class="app-toolbar-filler"></span>
    <button md-button (click)="isDarkTheme = !isDarkTheme">TOGGLE DARK THEME</button>
  </md-toolbar>

  <div class="app-content">

    <md-card>
      <button md-button>FLAT</button>
      <button md-raised-button md-tooltip="This is a tooltip!">RAISED</button>
      <button md-raised-button color="primary">PRIMARY RAISED</button>
      <button md-raised-button color="accent">ACCENT RAISED</button>
    </md-card>

    <md-card>
      <md-checkbox>Unchecked</md-checkbox>
      <md-checkbox [checked]="true">Checked</md-checkbox>
      <md-checkbox [indeterminate]="true">Indeterminate</md-checkbox>
      <md-checkbox [disabled]="true">Disabled</md-checkbox>
    </md-card>

    <md-card>
      <md-radio-button name="symbol">Alpha</md-radio-button>
      <md-radio-button name="symbol">Beta</md-radio-button>
      <md-radio-button name="symbol" disabled>Gamma</md-radio-button>
    </md-card>

    <md-card class="app-input-section">
      <md-input-container placeholder="First name"></md-input-container>

      <md-input-container #nickname placeholder="Nickname" maxlength="50">
        <md-hint align="end">
          {{nickname.characterCount}} / 50
        </md-hint>
      </md-input-container>

      <md-input-container>
        <md-placeholder>
          <i class="material-icons app-input-icon">android</i> Favorite phone
        </md-placeholder>
      </md-input-container>

      <md-input-container placeholder="Motorcycle model">
        <span md-prefix>
          <i class="material-icons app-input-icon">motorcycle</i>
          &nbsp;
        </span>
      </md-input-container>
    </md-card>

    <md-card>
      <md-list class="app-list">
        <md-list-item *ngFor="let food of foods">
          <h3 md-line>{{food.name}}</h3>
          <p md-line class="demo-secondary-text">{{food.rating}}</p>
        </md-list-item>
      </md-list>
    </md-card>

    <md-card>
      <md-spinner class="app-spinner"></md-spinner>
      <md-spinner color="accent" class="app-spinner"></md-spinner>
    </md-card>

    <md-card>
      <label>
        Indeterminate progress-bar
        <md-progress-bar
            class="app-progress"
            mode="indeterminate"
            aria-label="Indeterminate progress-bar example"></md-progress-bar>
      </label>

      <label>
        Determinate progress bar - {{progress}}%
        <md-progress-bar
            class="app-progress"
            color="accent"
            mode="determinate"
            [value]="progress"
            aria-label="Determinate progress-bar example"></md-progress-bar>
      </label>
    </md-card>

    <md-card>
      <md-tab-group>
        <md-tab label="Earth">
          <p>EARTH</p>
        </md-tab>
        <md-tab label="Fire">
          <p>FIRE</p>
        </md-tab>
      </md-tab-group>
    </md-card>

    <md-card>
      <md-icon>build</md-icon>
    </md-card>

    <md-card>
      <button md-button [md-menu-trigger-for]="menu">
        MENU
      </button>
    </md-card>

    <md-menu #menu="mdMenu">
      <button md-menu-item>Lemon</button>
      <button md-menu-item>Lime</button>
      <button md-menu-item>Banana</button>
    </md-menu>

    <md-card>
      <p>Last dialog result: {{lastDialogResult}}</p>
      <button md-raised-button (click)="openDialog()">DIALOG</button>
      <button md-raised-button (click)="showSnackbar()">SNACKBAR</button>
    </md-card>

  </div>

</md-sidenav-container>

<span class="app-action" [class.m2app-dark]="isDarkTheme">
  <button md-fab><md-icon>check circle</md-icon></button>
</span>

我希望得到一个结果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 官方指南上的内容需要更新。

angular/material2 按钮、进度条、输入等模块无法正常工作

angular/material2 modules like Button, ProgressBar, Input not working

angular-material2

angular

第 3 步：导入组件模块