Angular2マテリアルmd-buttonエラー

Question

Angular2がRC5をリリースしたことを以前から見ていましたので、テストアプリケーションを変更して調整する方法を見直すことにしました。このアプリは、私もアルファ7.2にそれを更新し、Material2を使用しているが、MD-ボタンコンポーネント

を使用しようとすると、私はこのエラーを取得しています「テンプレートは、エラーを解析：MD-リップル」にバインドできません（* ngIf = "isRippleEnabled（）" は「div」のプロパティではありません。 class = "md-button-ripple" [class.md-button-ripple-round] = "getRostButton（）"; "getRostButton（）" [ERROR - >] [md-ripple-trigger] = "getHostElement（）" [md-ripple-color] = "isRoundButton（）？ 'rgba（255,255,255,2.2）"） ： MdButton @ 0：180 'div'の プロパティではないため、 'md-ripple-color'にバインドできません。 （ "ton-ripple" [class.md-button-ripple-round] = "isRoundButton（）" - >] [md-ripple-color] ] = "isRoundButton（） 'RGBA（255、255、255、0.2）'？ ''" MD-リップル背景色= "RGB"）：MdButton @ 0：219"

I」は私はnav-barと呼ばれる追加しようとしています新しいコンポーネントでそれを使用して、mは、ここでの角度CLIは、材質を使用してファイルを作成したのですが

typescriptファイル

import { Component, OnInit } from '@angular/core'; 
import { MdToolbar } from '@angular2-material/toolbar'; 
import { MdButton } from '@angular2-material/button'; 
import { MdIcon, MdIconRegistry } from '@angular2-material/icon'; 

@Component({ 
    moduleId: module.id, 
    selector: 'nav-bar', 
    templateUrl: 'nav-bar.component.html', 
    styleUrls: ['nav-bar.component.css'], 
    directives: [ 
    MdToolbar, 
    MdButton, 
    MdIcon 
    ], 
    providers: [ 
    MdIconRegistry 
    ] 
}) 

export class NavBarComponent implements OnInit { 

    constructor() {} 

    ngOnInit() { 
    } 

} 

を追加しました

HTMLファイル

<md-toolbar> 
    <button md-button> 
    <md-icon>menu</md-icon> 
    </button> 
    NavBar 
</md-toolbar> 

Answer 1

はあなたのAppModuleでMdRippleModuleをインポートしよう：

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

import { AppComponent } from './app.component'; 
import { HttpModule} from '@angular/http'; 
import { MdRippleModule } from '@angular2-material/core/core'; <== this line 

@NgModule({ 
    imports:  [ BrowserModule, HttpModule, MdRippleModule ], <== add here 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

またはあなたのコンポーネント内MdRippleディレクティブを渡す：

... 
import { MdRipple } from '@angular2-material/core/core'; <== this line 
@Component({ 
    moduleId: module.id, 
    selector: 'nav-bar', 
    templateUrl: 'nav-bar.component.html', 
    styleUrls: ['nav-bar.component.css'], 
    directives: [ 
    MdToolbar, 
    MdButton, 
    MdIcon, 
    MdRipple <== add here 
    ], 
    providers: [ 
    MdIconRegistry 
    ] 
}) 
export class NavBarComponent implements OnInit { 
...