Angular2 Material md按钮错误答案

【问题标题】：Angular2 Material md-button ErrorAngular2 Material md按钮错误
【发布时间】：2016-12-20 01:32:09
【问题描述】：

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

"模板解析错误：不能绑定到'md-ripple-trigger'，因为它不是“div”的已知属性。 ("*ngIf="isRippleEnabled()" class="md 按钮波纹" [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' 的属性。（“吨波纹” [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>

【问题讨论】：

标签： javascript angularjs angular typescript angular-material2

【解决方案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 {
...

【讨论】：