Angular2 Material md-button Ошибка

Question

Я увидел ранее, что Angular2 запустил RC5, поэтому я решил обновить одно из своих тестовых приложений, чтобы увидеть изменения и настройки. Это приложение использует Материал2, я также обновил его Альфе 7.2, но я получаю эту ошибку при попытке использовать MD-кнопки Компонент

«Шаблон ошибки разбора: не удается выполнить привязку к«мкр-пульсация -trigger ', так как он не является известным свойством' div '. ("* ngIf =" isRippleEnabled() " class =" md-button-ripple " [class.md-button-ripple-round] = "isRoundButton()" [ERROR ->] [md-ripple-trigger] = "getHostElement()" [md-ripple-color] = "isRoundButton()? 'rgba (255, 255, 255, 0.2)") : MdButton @ 0: 180 Нельзя привязываться к «md-ripple-color», так как это не известно свойство 'div'. ("ton-ripple" [class.md-button-ripple-round] = "isRoundButton()" [md-ripple-trigger] = "getHostElement()" [ОШИБКА ->] [md-ripple-color ] = "isRoundButton() 'RGBA (255, 255, 255, 0,2)': ''" мкр-пульсаций цвет фона = "RGB"): MdButton @ 0: 219"

I» м при использовании его на новый компонент, я пытаюсь добавить называется nav-bar, вот Угловая CLI создан файл с Материал добавлен

машинопись файл

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

Попытка импортировать MdRippleModule в вашем AppModule:

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 { 
...