Angular2材质md按钮错误 [英] Angular2 Material md-button Error

问题描述

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

I saw earlier that Angular2 launched the RC5 so I decided to update one of my test apps to see the changes and how to adjust. This app is using Material2, I also updated it to Alpha 7.2, but I'm getting this error when trying to use the md-button component

模板解析错误：无法绑定到'md-ripple-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（）[ERROR
- >] [md-ripple-color] =isRoundButton（）？'rgba（255,255,255,0.2）'：''md-ripple-background-color =rgb）：MdButton @ 0：219

"Template parse errors: Can't bind to 'md-ripple-trigger' since it isn't a known property of '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 Can't bind to 'md-ripple-color' since it isn't a known property of 'div'. ("ton-ripple" [class.md-button-ripple-round]="isRoundButton()" [md-ripple-trigger]="getHostElement()" [ERROR ->][md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''" md-ripple-background-color="rgb"): MdButton@0:219"

我在我试图添加的新组件上使用它，名为 nav-bar ，这是Angular CLI创建的文件，添加了材料

I'm using it on a new component I'm trying to add called nav-bar, here's the Angular CLI created file with Material added

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>

推荐答案

尝试导入 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 指令：

Or pass MdRipple directive within your component:

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

这篇关于Angular2材质md按钮错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！