Angular2材质md按钮错误

Question

之前我看到Angular2启动了RC5，所以我决定更新我的一个测试应用程序以查看更改以及如何进行调整。 该应用程序使用的是Material2，我也将其更新为Alpha 7.2，但是在尝试使用md-button组件时遇到此错误

“模板解析错误：由于它不是'div'的已知属性，因此无法绑定到'md-ripple-trigger'。（“” * ngIf =“ isRippleEnabled（）” class =“ md-button-ripple” [ class.md-button-ripple-round] =“ isRoundButton（）” [错误->] [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）'：''“ md-ripple-background-color =” rgb“）：MdButton @ 0：219”

我在尝试添加的新组件上使用了nav-bar ，这是Angular CLI创建的文件，其中添加了Material

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

试图导入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 {
...